本文共 3382 字，大约阅读时间需要 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;// 配置全局基本 URLthis.$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/