使用axios库创建实例的示例，（创建实例时，传入了一个配置对象）同时还包含了请求拦截器和响应拦截器-编程知识

使用axios库创建实例的示例，（创建实例时，传入了一个配置对象）同时还包含了请求拦截器和响应拦截器

第一步：

在vue项目中src目录下创建utils>request.js

第二步：

在 request.js中，使用axios.create方法创建了一个名为request的axios实例（设置基本配置信息）
通过request.interceptors.request.use方法添加了请求拦截器。
通过request.interceptors.response.use方法添加了响应拦截器。
通过export default request语句导出了request实例，以便在其他地方使用该实例进行请求。

import axios from 'axios'// 创建axios实例
const request = axios.create({baseURL: 'http://localhost:8080/api/', // 设置baseUrltimeout: 4000 // 设置超时时间
})// 请求拦截器
request.interceptors.request.use(config => {// 在发送请求之前做些什么，比如添加请求头等return config},error => {// 对请求错误做些什么return Promise.reject(error)}
)// 响应拦截器
request.interceptors.response.use(response => {// 对响应数据做点什么，比如处理错误码等return response.data},error => {return Promise.reject(error)}
)export default request

第三步：

在main.js中导入

import request from '@/utils/request'
// 创建一个名为 $request 的全局变量
Vue.prototype.$request = request

axios与对比`request`：

使用axios发请求

1.每次发请求url都要写全

2.当页面报错时，用户使用时就直接看到页面报错（不友好）

    this.$axios({method: 'post',url: 'http://localhost:8080/api/upload/selectGoods',data: {pageNum: this.pageNum,pageSize: this.pageSize,keyWord: this.keyWord,}}).then((res) => {console.log(res + "sssssssss");let result = res.data.data;this.goodsData = result.list;this.total = result.total;})

效果：

使用request发请求

1.每次发请求url只需写不同的部分，相同的已经封装好了。

2.当页面报错时，页面会提示相关信息（友好）

  this.$request.post('upload/selectGoods', {data: {pageNum: this.pageNum,pageSize: this.pageSize,keyWord: this.keyWord,}}).then((res) => {if (res.code === '200') {let result = res.data;this.goodsData = result.list;this.total = result.total;}}).catch(error => {if (error.code === 'ECONNABORTED') {this.$message.error('网络繁忙，请稍后重试')} else {console.log('请求发生错误：', error.message)}})

效果：