vue中axios二次封装并发起网络请求配置

1.安装axios

npm i axios

 

 2.导入

//对axios进行二次封装
import axios from "axios"

// 创建axios实例，其实request就是axios

const requests =axios.create({
    //   发请求的时候自动出现api
      // baseURL:"api",
    //   请求超时的时间
      timeout:5000,
})

// 请求拦截器，
requests.interceptors.request.use((config)=>{
    // config对象可以添加headers请求头

}
// 响应拦截器
requests.interceptors.response.use(config=>{
    // 成功的回调函数，服务器相应数据回来以后，响应拦截器可以检测到
    return config.data
},error=>{
    console.log(error);
    return Promise.reject(new Error("fail"))
})

export default requests

3. 接口统一管理

说明：项目小可以在组件的生命周期函数中发请求。create组件

3.1index.js

说明：导入封装好的axios

import requests from "./request";

// 三级联动的接口;对外暴露函数，页面导入使用就行了
export const reqCatgoryList = () => {
  // 返回发请求
  return requests({ url:"/list/api/product/getBaseCategoryList", method: "GET" });
};

3.2跨域问题

说明：JSONP、CROS、代理。下面配置代理模式

module.exports = {
  // 关闭eslint
  lintOnSave: false,
  devServer: {
    proxy: {
      "/list": {
        target: "*******",
        ws: true,
        changeOrigin: true,
        pathRewrite: { "^/list": "" },
        secure: false,
      },
    },
  },
};