[JavaScript知识库]axios封装

axios的封装和api接口的统一管理

1. 为什么使用axios封装和api接口的统一管理？
   *主要目的就是在帮助我们简化代码和利于后期的更新维护

   命令：npm install axios -S; // 安装axios复制代码

2. 新建目录：

   在src目录中新建http文件夹–>建立service.js文件

3. 除了使用npm安装外，我们还可以使用yarn安装 yarn add axios -S -s表示安装在生产环境（dependencies）中，生产环境的安装，开发环境也可以使用

4. 在main.js中全局引入 import axios from ‘axios’

import Vue from 'vue'
import App from './App'
import router from './router' // 导入路由文件
import store from './store' // 导入vuex文件
import axios from './http/service' // 导入a接口
 
Vue.prototype.$axios= axios; // 把axios挂载到Vue的原型上，这样的话项目中任何一个组件都可以使用了

5. 在service.js文件中进行具体的封装
   axios本身是单例模式

import axios from 'axios'
import {baseUrl} from '@/config/index.js'
import {Toast} from "vant"  //引入vant组件

// 设置axios的基地址
// 接口地址有相同的部分，我们要把相同的部分提取出设置一下，后面调用接口就不需要写相同的部分
//创建service实例，
const service = axios.create({
  baseURL: baseUrl, //基地址
  timeout: 5000, // request timeout 超时时间
})

//service.defaults.baseURL=baseUrl

// 添加请求拦截器----（设置请求头，传递token）
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么  //请求数据时能够看到加载效果
    //1.请求loading开启动画
    Toast.loading({
      duration:5000,
      forbidClick: true
    })
    //2.设置token--->使用vuex  在没有配置vuex的情况下我们可以使用本地存储
    config.headers ['Authorization'] =vuex
    **本地存储是不具备响应功能的，改变数据，页面并不会立即更新**
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器---处理共性的错误统一做处理
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    Toast.clear()
    return response.data;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

//   导出
export default service;

6. 在http中新建一个requset_ul.js文件进行封装不同的接口，封装的目的便于后期数据更改后直接对接口进行更改，避免花费大量的时间寻找组件进行更改，提高了工作效率。

//封装所有路径  便于后面的维护
module.exports={
    smsCode:"/smsCode", //短信验证
    login:"/login",  //登录
    banner:"/banner",//首页轮播图
}

7. 在http文件夹中新建api.js文件

//先引入axios和封装好的路径
import service from "./service";
import request_ur from "./request_ur";

//封装请求方法   arg 表示参数
//获取验证码
export function smsCode(arg){
    return service({
        url:request_ur.smsCode,//对应的
        data:arg, //参数
        method:"post" //请求的方式
    })
}

8. 组件中的使用 **.vue
   用封装好的路径，能够减少代码.

<script>
//先引入封装好的路径
import { smsCode} from "@/http/api";
methods：{
   async getCode(){
      let res =await smsCode({ mobile: 手机号码, sms_type: "login" }).then(res => {
        console.log(res, "获取验证码");
  }
}
</script>