从零开始学VUE之网络模块(Axios)

最新推荐文章于 2025-05-20 04:14:26 发布

原创最新推荐文章于 2025-05-20 04:14:26 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#网络 #python #vue #ajax #java

本文详细介绍Axios的功能特性及其使用方法，包括如何发送不同类型的HTTP请求、处理并发请求、配置默认参数及使用拦截器等。

Axios

功能特点

在浏览器中发送XHR请求
在Node.js中发送http请求

支持 Promise API
拦截请求和响应

支持多种请求方式

axios(config)
axios.request(config)

axios.get(url[,config])
axios.delete(url[,config])

axios.head(url[,config])
axios.post(url,data[,config])

axios.put(url,data[,config])
axios.patch(url,data[,config])

安装

npm install axios --save

测试地址[老师的]

http://123.207.32.32:8000/home/multidata

简单使用

// 导入 axios
import axios from "axios";

// 使用
axios({
  url:'http://123.207.32.32:8000/home/multidata'
}).then(res => {
  console.log(res);
})

传递参数

(拼接URL后面)

axios({
  url:'http://123.207.32.32:8000/home/data',
  params:{
    type:'pop',
    page:1
  }
}).then(res => {
  console.log(res);
})

发送并发请求

/**
 * 发送多请求
 */
axios.all([
  axios({
    url:'http://123.207.32.32:8000/home/multidata'
  }),
  axios({
    url:'http://123.207.32.32:8000/home/multidata'
  })
]).then(res => {
  // 返回结果res是一个数组 [0] 就是第一个请求返回的结果 [1]...
  console.log(res);
})
axios.all([
  axios({
    url:'http://123.207.32.32:8000/home/multidata'
  }),
  axios({
    url:'http://123.207.32.32:8000/home/multidata'
  })
  // 可以通过 axios.spread展开返回结果
]).then(axios.spread((res1,res2) => {
  // 返回结果res是一个数组 [0] 就是第一个请求返回的结果 [1]...
  console.log(res1);
  console.log(res2);
}))

抽取默认配置

/**
 * 默认配置
 */
// 默认前缀URL
axios.defaults.baseURL = 'http://123.207.32.32:8000'
// 超时时间 单位:毫秒
axios.defaults.timeout = 5000

/**
 * 简单使用
 */
axios({
  url:'/home/multidata'
}).then(res => {
  console.log(res);
})

常见的配置

请求地址

url:'/user'

请求类型

method:'get'

请求路径

baseURL:'https://www.baidu.com'

请求前的数据处理

transformRequest:[function(data){}]

请求后的数据处理

transformResponse:[function(data){}]

自定义的请求头

headers:{'x-Requested-With':'XMLHttpRequest'},

URL查询对象

params:{id:12}

查询对象序列化函数

paramsSerializer:function(params){}

request body

data:{key:'aa'}

超时设置s

timeout : 1000

跨域是否携带Token

withCredentials:false

自定义请求处理

adapter:function(resolve,reject,config){}

身份验证信息

auth:{uname:'彼岸舞',pwd:'111'}

响应的数据格式

json | blob | document | arraybuffer | text | stream
responseType : 'json'

创建对应的Axios的实例

let config = {
  baseURL:'http://123.207.32.32:8000',
  timeout:5000
};
let axiosInstance = axios.create(config);
axiosInstance({
  url:'/home/multidata'
}).then(res => {
  console.log(res);
})

拦截器

let config = {
  baseURL:'http://123.207.32.32:8000',
  timeout:5000
};
let axiosInstance = axios.create(config);

// 请求拦截器
axiosInstance.interceptors.request.use(
  // 拦截请求时的 config
  config => {
    console.log(config);
    return config;
  },
  // 拦截请求失败的error 一般请求不会失败的
  error => {

  }
)
// 响应拦截器
axiosInstance.interceptors.response.use(
  // 请求返回的数据
  res => {
    console.log(res);
    // 做数据过滤 只返回后端返回的data
    return res.data;
  },
  // 请求失败的error
  error => {
    console.log(error);
  }
)

作者：彼岸舞

时间：2021\06\28

内容关于：VUE

本文属于作者原创,未经允许,禁止转发