Vue3使用Axios请求二次封装（包含跨域配置）

一.axios安装与封装

1.1 安装

npm install axios

1.2 二次封装

1.引入 axios

import axios from 'axios'

2.创建axios实例

使用axios对象中的create方法创建实例。可以在创建实例时，配置基础路径、超时响应时间。

const request = axios.create({
   
  //基础路径
  baseURL: import.meta.env.VITE_APP_BASE_API, //基础路径上会携带/api
  timeout: 5000, //超时的时间
})

其中基础路径import.meta.env.VITE_APP_BASE_API配置见第二章环境变量配置。
同时，在配置对象中也可配置请求头等，如：

headers:{
   
    "Content-type": "application/json;charset=UTF-8",
    "Host":"weather.cma.cn",
}

3.请求拦截

使用request实例，添加请求与响应拦截器。

request.interceptors.request.use((config) => {
   
  // 1.获取用户相关的小仓库:获取仓库内部token,登录成功以后携带给服务器
  //const userStore = useUserStore()
  //if (userStore.token) {
   
    //config.headers.token = userStore.token
    //config配置对象,headers属性请求头,经常给服务器端携带公共参数
  //}
  
  // 2.也可在此处对是否有token进行拦截
  
  //返回配置对象，必须返回，否则发不出请求
  return config
})

4.响应拦截

在此处对返回的响应数据进行处理。

request.interceptors.response.use(
  (response) => {
   
    //成功回调
    //简化数据
    return response.data
    //未简化
   // return Promise.resolve(response.data)
  },
  (error) => {
   
    //失败回调:处理http网络错误的
    //定义一个变量:存储网络错误信息