Vue中axios的封装和使用

Vue中axios的封装和使用

首先,安装axios模块

Vue中axios的封装和使用_第1张图片
属于 运行 时依赖哦

打开项目目录

npm install axios@0.18.0 --save

或者如上图所示,在 package.json文件 dependencies 对象中加上

"axios": "^0.18.0"

然后 npm install

之后新建network目录,目录下新建request.js

import axios from 'axios'

export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: '接口地址', 
    timeout: 5000
  })

  // 2.axios的拦截器
  // 2.1.请求拦截的作用
  instance.interceptors.request.use(config => {
    return config
  }, err => {
    // console.log(err);
  })

  // 2.2.响应拦截
  instance.interceptors.response.use(res => {
    return res.data
  }, err => {
    console.log(err);
  })

  // 3.发送真正的网络请求
  return instance(config)
}

换上接口地址即可

使用示例

Vue中axios的封装和使用_第2张图片

你可能感兴趣的