vue封装api
下载引入axios
import axios from 'axios';
const server = axios.create({
baseURL: 'https://api.ii.c', //默认地址
timeout: 5000, //请求超时时间设置
})
请求拦截
进行请求头设置, loading开启等操作
server.interceptors.request.use(config =>{
// 请求时的loading,这里用的是vant
Toast.loading({
message: '加载中...',
forbidClick: true,
});
// config是请求相关的所有信息 是对象,通过它来配置修改
config.headers.token = 'com' //做出的修改
return config //将配置后的信息返出,若不返出则后续无法进行
}, err => { //错误时
Promise.reject(err) //使用promise将错误信息返出
})
响应拦截
对返回的数据,根据状态码进行处理, 以及关闭loading的操作
//响应信息进行处理
server.interceptors.response.use(res)=> {
//请求结束,关闭loading
Toast.clear()
//返出信息
return res.data //方便获取信息
}, err => {
console.log(err) //错误是打印信息
}
返出server
exports 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
import request from 'url' //引入
//进行数据请求
export const addLogin = (data) => request(
{url: './login', method: 'post', data}
)