axios的二次封装

2022-03-21 本文已影响0人似朝朝我心

创建vue项目
安装axios

npm i axios -S

在src目录下创建一个名为api的目录，在api目录下创建一个request.js脚本。

//对于原有的axios进行二次封装
import axios from 'axios' //引入axios

//1.利用axios对象的create方法去创建一个axios示例
//2.request就是axios,只不过可以配置参数
const requests = axios.create({
    //配置对象
    //baseURL 基础路径，发请求的时候，路径当中会出现api
    baseURL:"/api",
    timeout:5000 //请求超时超过5s代表请求失败
})

//请求拦截器：在发起请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
//interceptors 拦截器的意思
requests.interceptors.request.use((config)=>{
    //config 是一个配置对象，该对象里面有一个属性很重要，就是header请求头
    return config
})

//响应拦截器
requests.interceptors.response.use((res) =>{
    //响应成功的回调函数，服务器响应数据回来后，响应拦截器可以检测到，可以做一些事情
    return res.data
},(error) =>{
    //服务器响应失败的回调函数
    return Promise.reject(new Error('Faile'))
})


//对外暴露
export default requests

api接口的统一管理

为什么api接口的需要统一管理？

小项目：如果api接口只有一两个，完全可以在组件的生命周期created或者mounted里面发起axios请求。
大项目：组件成百上千，层层依赖，单单接口就有几十个，而再利用生命周期发起请求就有点捉襟见肘了，为了方便后期的管理和维护，所以需要进行api接口的统一管理。

操作：

在api目录下创建一个index.js脚本。

//对当前模块进行API统一管理
import requests from "./request";

//接口：/api/product/getBaseCategoryList  get请求 无参数
//发请求:axios发请求返回结果Promise对象

export const reqCategoryList = () => requests({url:'/api/product/getBaseCategoryList',method:'get'}) //箭头函数可以省去return 和{}

跨域问题

解决方案：JSONP、CROS、代理服务器

webpack配置代理服务器,官方文档搜proxy

找到vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,

//配置代理服务器
  devServer: {
    proxy: {
      '/api': {
        target: 'http://39.98.123.211', //target:需要指向服务器的IP，而不是本地
        pathRewrite: { '^/api': '' }, //路径重新可以不需要，接口本身带/api
      },
    },
  },

})

重启项目

axios的二次封装

猜你喜欢

热点阅读