Axios基本概念

Axios是一个基于Promise封装的一个http库，可以用于浏览器和node.js中
Axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样

安装Axios

npm install axios

发送请求

发送get请求

axios({
  method:  "get", // (默认是get请求)
  url:  "/user/12345",
  params: {
    firstName:  "Fred",
    lastName:  "Flintstone"
  }
})
.then(function (response) {  
    //response就是请求的结果
    
  });

快捷发送get请求

//axios.get(url[, config])
axios.get('/data.json', {
  params:{
    id:1234
  } 
}).then((res)=>{
    
})

发送post请求

axios({
  method:  "post",
  url:  "/user/12345",
  data: {
    firstName:  "Fred",
    lastName:  "Flintstone"
  }
})
.then(function (response) {  
  response
});

快捷发送post请求

//axios.post(url[, data[, config]])
axios.post('/data.json', {
    id:1234
})

自定义axios实例

axios.create({
    //配置项
})

配置项

以下配置中，只有url是必须的，如果没有配置method，将默认使用get方法。

url: '/user'：用户请求服务器资源的 URL
method: 'post'：创建请求时使用的方法
baseURL: 'http://demo-domain:8080/api/'：自动加在URL(非绝对路径时)前的路径
headers: { 'x-Requested-With': 'XMLHttpRequest' }：自定义请求头
params: { 'ID': '12345' }：与请求一起发送的URL参数，当method指定为GET时使用
data: { 'name': 'zhangfs' }：请求主体参数，用于PUT，POST，PATCH方法
timeout: 8000：请求超时时间，0表示无超时；超过时间请求被中断
withCredentials: false： //表示跨域请求时是否需要使用凭证,是true的时候，开启withCredentials后，服务器才能拿到你的cookie，当然后端服务器也要设置允许你获取你开启了才有用

拦截器

请求拦截器- axios.interceptors.request

// 注意，这里面有 2 个函数——分别是成功和失败时的回调函数
axios.interceptors.request.use(function (config) {
    // 发起请求前执行一些处理任务
    return config; // 返回配置信息
  }, function (error) {
    // 请求错误时的处理
    return Promise.reject(error);
  });

响应拦截器

axios.interceptors.response.use(function (response) {
    // 处理响应数据
    return response; // 返回响应数据
  }, function (error) {
    // 响应出错后所做的处理工作
    return Promise.reject(error);
  });

关于本地存储

localStorage和sessionStorage只能存储字符串，如果需要存储对象，首先要转化为字符串。

任何本地存储都不能跨域访问

sessionStorage和localStorage

//1.保存数据
sessionStorage.setItem('key', 'value')
localStorage.setItem('key', 'value')
//2.获取数据
sessionStorage.getItem('key')
localStorage.getItem('key')
//3.删除数据
sessionStorage.removeItem('key')
localStorage.removeItem('key')
//4.清空数据
sessionStorage.clear()
localStorage.clear()

cookie

// 设置cookie

document.cookie = "username=orochiz"

document.cookie = "age=20"

// 读取cookie

var msg = document.cookie

console.log(msg) // username=orochiz; age=20

// 添加过期时间（单位：天）

var d = new Date() // 当前时间

var days = 3 // 3天

d.setDate(d.getDate() + days)

document.cookie = "username=orochiz;"+"expires="+d

// 删除cookie （给某个键值对设置过期的时间）

d.setDate(d.getDate() - 1)

console.log(document.cookie)

cookie、sessionstorage、localStorage的对比（非常重要的面试题）

一、存储的时间有效期不同

1、cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效

2、sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效

3、localStorage的有效期是在不进行手动删除的情况下是一直有效的

二、存储的大小不同

1、cookie的存储是4kb左右，存储量较小，一般页面最多存储20条左右信息

2、localStorage和sessionStorage的存储容量是5Mb(官方介绍，可能和浏览器有部分差异性)

三、与服务端的通信

1、cookie会参与到与服务端的通信中，一般会携带在http请求的头部中，例如一些关键密匙验证等。

2、localStorage和sessionStorage是单纯的前端存储，不参与与服务端的通信

vue跨域配置

 devServer: {
    proxy: { //配置跨域
      '/api': {
        target: 'http://localhost:80', //填写请求的目标地址
        // ws: true,
        changOrigin: true, //允许跨域
        pathRewrite: {
          '^/api': '' //请求的时候使用这个api就可以
        }
      }
    }
  }