原因
axios 是网络请求的第三库，为了防止降低对第三库的依赖性，所以将axios请求封装为函数，方便后期代码的维护
安装
npm install axios
封装
- 在目录结构 src 文件夹下创建 network/request.js
// 引入axios库
import axios from 'axios'
// 封装axios实例
export function request(config){
// 1. 创建axios实例
const instance = axios.create({
// 实例对象的 公共配置项
baseURL:'http://jsonplaceholder.typicode.com',
timeout:5000,
// 等等~需求的配置项
})
// 2. 配置拦截器
// 2.1 请求拦截 (config,失败信息)
instance.interceptors.request.use(config=>{
// 举例一些对config 操作环境
// (1) 在发送请求之前，config中有一些配置信息不符合服务器标准
// (2) 在发送请求之前，需要界面中显示正在请求的图标，例如旋转的 ○
// (3) 某些网络请求在请求前必须携带特殊信息（登录状态携带token信息）
return config;
},error=>{
// 对失败信息处理
console.log(error);
// return new Promise.reject(error);
})
// 2.2 响应拦截（响应数据，失败信息）
instance.interceptors.response.use(result=>{
// 对返回数据结果进行处理
return result.data;
},error=>{
// 对失败信息处理
console.log(error)
})
// 3. 发送真正的网络请求（基于axios源码，此时instance就是一个Promise对象）
return instance(config)
}
- 假设在 main.js 调用上述封装的函数
// 导入已封装好的 axios 模块
import {request} from './network/request'
// 调用方法
request({
url:'/posts',
// 默认GET请求 http://jsonplaceholder.typicode.com/post?userId=5
params:{
userId:5,
}
}).then(res =>{
// 对请求回来的数据进行操作处理
console.log(res);
}).catch(err =>{
console.log(err);
})