学习axios的封装和使用vue-cli解决跨域问题笔记

1.引入

import axios from 'axiso'

2.创建axios实例

从axios官网c一下样本

const request = axios.create({
	baseURL:'/api',
	timeout:5000
})

3.配置拦截器

从axios官网c一下拦截器骨架

请求拦截器:

1.添加token

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    config.headers.Authorization(一般是这个) = `Bearer ${token}`
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

响应拦截器:

请求成功, 一般对结果解构一层data,不写也行

// 添加响应拦截器
// 注意,因为我们已经创建axios实例,这里需要用实例调用,说实话很容易忘掉
request.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    //return response;      //这是原来的
    return response.data
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

请求失败: 1.提示错误 2.如果错误状态码是401,跳回登录并提示用户登陆到期

// 添加响应拦截器
request.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    //return response;      //这是原来的
    return response.data
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    if(error.response) {
        if(error.response.status === 401) {
        	//这里我用一下vant的toast组件
            toast.fail('请重新登陆')
            router.push('/login')
        } else {
            toast.fail(error.response)
        }
    }
    return Promise.reject(error);
  });

4.通过 vue-cli 配置代理解决跨域

在vue.config.js的导出对象中,devServer属性中新加一个属性 proxy

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        	target: '服务器地址'
        }
      }
    }
  }
}

这样在发送请求时,就可以跳过浏览器,不会有同源策略了,就可以实现跨域

注意,这里设置了服务器地址之后,就不要再拦截器里设置基地址了,否则发请求优先发拦截器里的地址,就不能实现跨域了

最后叠个甲,有错欢迎指正