[JavaScript知识库]vue如何封装api

1.先下载引入

引入与创建axios的实例

					server.js文件
1.引入axios
import axios from 'axios';
//创建axios的实例
const server = axios.create({
baseURL:'http://api.i120'//z整个项目的默认地址
timeout：5000，//请求超时时间的设置
})

2.请求拦截

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

1.对请求的拦截做出相应
server.interceptors.request.use(config =>{
//config是请求相关的所有信息，是一个对象通过它进行配置和修改
config.header.token = '111'//做出的修改
return config //将配置的信息返回，不返出后续无法进行
}，err =>{  //错误时的信息
	Promise.reject(err)//使用promise将错误信息反出
})

3.响应拦截

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

//对响应的信息进行处理
server.interceptors.response.use(res => {
    return res.data  //这里是为了获取信息更方便
}, err => {
    console.error(err);  //错误时将信息打印
})

4.request.js

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

// 引入
import server from './server'
// 最后返出一个，带有各种信息的对象 对象是为了获取时不用写去全部
export default function request({ url = '', method = 'get', data = {}, params = {} }) {
    return server({ url, method, data, params })
}

5.api.js

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

import request from '路径'
 
export const addLogin = (data) => request(
             { url: '/login', method: "post", data, })