vue的封装网络请求api模块

                                       server.js文件

引入与创建axios实例

// 引入axios
import axios from 'axios';
// 创建axios实例
const server = axios.create({
    baseURL: 'https://api.it120.cc', //整个项目的默认地址
    timeout: 5000,  //请求超时时间的设置
});

请求拦截

可以进行请求头设置，loading的开启等操作

// 对请求的拦截做出响应

server.interceptors.request.use(config => {

    //请求时的loading ,这里使用的是vant，事先需安装引入对应配置

     Toast.loading({
         message: '加载中...',
         forbidClick: true,
     });

    // config是请求相关的所有信息  是一个对象 通过它进行配置和修改

    // 一个传递token的标准 
    // config.headers['Authorization'] = 'Bearer '+ token

    //基于Authorization的一个传递token的方式
    // config.headers.Authorization = token

    // 这是一个一般的传递token的方法，在没有要求标准的时候可用
    //config.headers.token = token //做出的修改

    return config  //将配置后的信息返出  不返出  后续无法进行

}, err => {   //错误时的信息

    Promise.reject(err)  //使用promise将错误信息返出

});

响应拦截

对返回的数据，根据状态码进行处理，以及关闭loading的操作

//对响应的信息进行处理

server.interceptors.response.use(res => {

    //请求结束，关闭loading

    Toast.clear()

    //返出信息

    return res.data  //这里是为了获取信息更方便

}, err => {

    console.error(err);  //错误时将信息打印

})

返出server

// 将最终结果返出
export default server

                                        request.js

接受server.js传来的数据进行处理，并返出一个，带有各种信息的对象

// 引入

import server from './server'

// 最后返出一个，带有各种信息的对象 对象是为了获取时不用写去全部

export default function request({ url = '', method = 'get', data = {}, params = {} }) {

    return server({ url, method, data, params })

}

                                               api.js

引入request，并在这里进行数据的请求

例：

import request from '路径'

export const addLogin = (data) => request(

             { url: '/login', method: "post", data, })