[vue javaScript]axios的安装和简单封装

安装axios

npm i axios

以下配置均是参照官方文档:axios官方文档

注意官方文档好像要梯子才能进。

axios的简单封装

创建axios实例和以及请求拦截器和响应拦截器

我们配置和封装axios的目的，无非是为了减少重复代码的开发。

比如，如果你所有的url都有一个共同的前缀，或者都需要某种共同的处理，那么就可以把这些共用的配置提取出来。放在配置中封装起来。

请求拦截器和响应拦截器，就是在发送请求之前、获取响应数据前，对请求进行一些操作，比如请求回来的数据常常会包裹很多层data，我们可以在获取相应数据之前取一层data，使得后面的代码更加简洁。

//axios的封装
import axios from 'axios'

// 创建axios实例，配置基地址和响应时间
const http = axios.create({
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
  timeout: 5000
})

// axios请求拦截器
http.interceptors.request.use(
  (config) => {
    // 在发请求前做些什么
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// axios响应拦截器
http.interceptors.response.use(
  function (response) {
    // 2XX范围内的状态码会触发该函数
    // 对响应数据做点什么
    return response
  },
  function (error) {
    return Promise.reject(error)
  }
)

// 之后需要发起请求,只需要调用http即可,就不用重新调用axios并一个一个的配置了
export default http