本文共 3523 字，大约阅读时间需要 11 分钟。

基本用法

安装

安装axios可以通过以下命令：

npm install axios --save

在 main.js 中引入 axios：

import axios from 'axios';
Vue.prototype.$axios = axios;

在组件中使用 axios：

Axios请求方法

axios 提供多种请求方法，包括：

• get：获取数据
• post：提交数据
• put：更新数据
• patch：局部更新数据
• delete：删除数据

GET 请求

get 方法用于获取远程资源的数据，可以通过以下方式使用：

// 方法一
this.$axios.get('/goods.json', {
  params: {
    id: 1
  }
}).then(res => {
  console.log(res.data);
}, err => {
  console.log(err);
});
// 方法二
this.$axios({
  method: 'get',
  url: '/goods.json',
  params: {
    id: 1
  }
}).then(res => {
  console.log(res.data);
}, err => {
  console.log(err);
});

POST 请求

post 方法用于发送数据到服务器，通常用于表单提交或文件上传。可以选择以下方式：

// 方法一
this.$axios.post('/url', {
  id: 1
}).then(res => {
  console.log(res.data);
}, err => {
  console.log(err);
});
// 方法二
this.$axios({
  method: 'post',
  url: '/url',
  data: {
    id: 1
  }
}).then(res => {
  console.log(res.data);
}, err => {
  console.log(err);
});
// form-data 请求
let data = { /* 请求参数 */ };
let formdata = new FormData();
for (let key in data) {
  formdata.append(key, data[key]);
}
this.$axios.post('/goods.json', formdata).then(res => {
  console.log(res.data);
}, err => {
  console.log(err);
});

PUT 和 PATCH 请求

put 和 patch 方法用于更新数据：

// PUT 请求
this.$axios.put('/url', {
  id: 1
}).then(res => {
  console.log(res.data);
});
// PATCH 请求
this.$axios.put('/url', {
  id: 1
}).then(res => {
  console.log(res.data);
});

DELETE 请求

delete 方法用于删除数据：

// 参数以明文形式提交
this.$axios.delete('/url', {
  params: {
    id: 1
  }
}).then(res => {
  console.log(res.data);
});
// 参数以封装对象形式提交
this.$axios.delete('/url', {
  data: {
    id: 1
  }
}).then(res => {
  console.log(res.data);
});
// 方法二
axios({
  method: 'delete',
  url: '/url',
  params: {
    id: 1
  },
  data: {
    id: 1
  }
}).then(res => {
  console.log(res.data);
});

并发请求

通过 axios.all 方法可以同时发起多个请求，并统一处理返回值：

this.$axios.all([
  this.$axios.get('/goods.json'),
  this.$axios.get('/classify.json')
]).then((goodsRes, classifyRes) => {
  console.log(goodsRes.data);
  console.log(classifyRes.data);
});

Axios实例

创建 Axios 实例

可以创建多个 axios 实例，每个实例可以有不同的配置：

let instance = this.$axios.create({
  baseURL: 'http://localhost:9090',
  timeout: 2000
});
instance.get('/goods.json').then(res => {
  console.log(res.data);
});

全局配置

可以对 axios 进行全局配置：

// 配置全局超时时长
this.$axios.defaults.timeout = 2000;
// 配置全局基本 URL
this.$axios.defaults.baseURL = 'http://localhost:8080';

实例配置

可以对单个实例进行配置：

let instance = this.$axios.create();
instance.defaults.timeout = 3000;

请求配置

配置优先级为：请求配置 > 实例配置 > 全局配置

this.$axios.get('/goods.json', {
  timeout: 3000
}).then();

拦截器

请求拦截器

可以定义请求拦截器，用于处理请求前或请求中的逻辑：

this.$axios.interceptors.request.use(config => {
  return config;
}, err => {
  return Promise.reject(err);
});
// 创建实例拦截器
let instance = this.$axios.create();
instance.interceptors.request.use(config => {
  return config;
});

响应拦截器

可以定义响应拦截器，用于处理请求后的逻辑：

this.$axios.interceptors.response.use(res => {
  return res;
}, err => {
  return Promise.reject(err);
});

取消拦截

可以通过 eject 方法取消拦截器：

let instance = this.$axios.interceptors.request.use(config => {
  config.headers = {
    token: ''
  };
  return config;
});
// 取消拦截
this.$axios.interceptors.request.eject(instance);

错误处理

可以通过 catch 方法处理错误：

this.$axios.get('/url').then(res => {
}).catch(err => {
  console.log(err);
});

取消请求

可以通过 CancelToken 对请求进行取消：

let source = this.$axios.CancelToken.source();
this.$axios.get('/goods.json', {
  cancelToken: source
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
});
// 取消请求
source.cancel('取消后的信息');

通过以上方法，可以更高效地使用 axios 进行数据请求和处理。

转载地址：http://owpk.baihongyu.com/