个人笔记 -- Axios封装原理、console.log()和console.dir()的区别、开发环境解决跨域问题、Vue设置全局自定义指令、cookies和localstorage区别

Axios封装原理

// 配置axios 返回Promise结果
const axios = (option)=>{
	return new Promise((resolve,rejuect)=>{
		const xhr = new XMLHttpRequest()
		// 失败判断回调
		if (!options.url){
			return reject('url 为必填参数')
		}
		xhr.open
		xhr.send
		// 成功回调
		xhr.onload = ()=>{
			resolve(xhr.responseText)
			}
		}
	)
}

axios({
	url,
	method,
	data
}).then(res=>{
	//成功
}).catch(err=>{
	//失败
})

console.log()和console.dir()的区别

console.log() 只是打印结果
console.dir() 可以显示结果中对象的所有属性和方法

import * as xx from ‘…’

如果一个文件export出不止一个元素,则引入的时候可以用*来全部导入,获得一个自定义名称的对象包含导出的所有值

import { aa:AA } from ‘…’

单个导入并自定义名称

const obj2 = {…obj1}

ES6浅拷贝语法

const obj = {…obj1,…obj2}

ES6展开数组并合并语法,等于const boj = obj1.concat(obj2)

开发环境解决跨域问题

• Jsonp:在标签内请求网址,如<script src='http://budu.com/jquery.js'></script>.缺点:只能发Get请求
• cors响应头:在服务器用access control allow origin + 信任服务器 . 缺点:需要后端配合
• 用proxy代理:例如:在vue项目中

//vue.config.js
devServer: {
    // 设置cli开发跨域代理
    proxy: {
      '/aip': {
      // 当本地的请求有/api的时候，就会代理请求地址向另外一个服务器发出请求
        target: 'http://xxx-xxx.xxxx.net/', // 跨域请求的地址
        changeOrigin: true // 是否开启跨域 只有这个值为true的情况下 才表示开启跨域
      }
    }
}

Vue设置全局自定义指令

//入口文件main.js
 Vue.directive('directive_name',{
  inserted(dom, option) {
  // dom 使用指令的dom元素
  // option option.value可以拿到指令后面传入的值
  })

cookies和localstorage区别

cookies:

• 最大为4kb;
• 数据在服务器与浏览器间传递;
• 无论浏览器是否关闭,只在限定的时间内有效

localStorage:

• 5mb或更大;
• 只存储在浏览器,不会把数据发给服务器
• 如果不手动清除浏览器数据,永久有效