Axios

Posted 2021-09-16 Xmengyan

一.为什么要对axios封装？

axios 封装了原生的 XHR，让我们发送请求更为简单，但假设在一个成百上千个 vue 文件的项目中，我们每一个 vue 文件都要写 axios.get()或 axios.post() 岂不是很麻烦？后期的维护也不方便，所以我们要对 axios 进行进一步的封装。

二.怎样封装？

       1. 在src下面新建一个http文件夹

        （1）新建一个service文件

        （2）导入axios包及vant中Toast组件            

import axios from 'axios';
import {Toast} from 'vant';

        (3)创建axios、baseUrl、与超时时间

//1 创建axios baseURL 超时时间
const service = axios.create({
    baseURL:"https://api.it120.cc/small4",
    timeout: 5000,
})

        （4）设置请求拦截器

//2 请求
service.interceptors.request.use(
    (config) => {
           Toast.loading({//loading
            message: '加载中...',
            forbidClick: true,
            duration:30000,
          });
 
        return config
    }, (error) => {//捕获错误信息
        return Promise.reject(error)
    })

        （5）设置响应拦截器

//3 响应
service.interceptors.response.use(
    (response) => {
        
        Toast.clear()//关闭loading
        return Promise.resolve(response)
    }, (error) => {
        return Promise.reject(error)//对数据进一步处理
    })

        （6）通过export导出

export default service

        总：

import axios from 'axios'
import {Toast} from "vant"
 
//1 创建axios baseURL 超时时间
const service = axios.create({
    baseURL:"https://api.it120.cc/small4",
    timeout: 5000,
})
//2 请求
service.interceptors.request.use(
    (config) => {
           Toast.loading({//loading
            message: '加载中...',
            forbidClick: true,
            duration:30000,
          });
 
        return config
    }, (error) => {//捕获错误信息
        return Promise.reject(error)
    })
//3 响应
service.interceptors.response.use(
    (response) => {
        
        Toast.clear()//关闭loading
        return Promise.resolve(response)
    }, (error) => {
        return Promise.reject(error)//对数据进一步处理
    })
//4 导出
export default service

2.在新建一个app.js文件

export function smsCode(参数名){
    return service({
        url:接口地址,
        data:参数名,
        method:请求参数
    })
}

3.在页面中使用

import { 方法名：如smsCode } from "@/http/api";

   async  方法名（）{
               let res=await smsCode（）
        }

        console.log（res） log一下