欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue(九) axios

程序员文章站 2022-06-19 13:13:50
Axios:Axios是一个基于promise的HTTP库;引入axios使用方法(API)1.axios(config)2.axios(url,[config])config 配置对象以下都是最常用的配置axios({ method: 'get', // post、get、put.... baseURL: '', // 请求的...

Axios:

Axios是一个基于promise的HTTP库;

引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios使用方法(API)

1.axios(config)
2.axios(url,[config])

config 配置对象

以下都是最常用的配置

axios({
 method: 'get', // post、get、put....
  baseURL: '', // 请求的域名,基本地址
  url: '', // 请求的路径
  params: {}, // 会将请求参数拼接在url上
  data: {}, // 会将请求参数放在请求体中
  headers: {}, // 设置请求头,例如设置token等
  timeout: 1000, // 设置请求超时时长,单位:ms

})

使用例子看github:

方法别名,(等同于axios([config]))

axios.request(config)
axios.get(url, [config])
axios.post(url, [data], [config]])
axios.delete(url, [config])
axios.head(url, [config])
axios.put(url, [data], [config])
axios.patch(url, [data], [config]])
axios.options(url, [config])

配置默认值

比如我们的方法里有用到相同的配置,每次都要写一次,这个时候就可以把它拿出来统一的写:
1.全局配置:

axios.defaults.baseURL = "https://...."
axios.defaults.timeout = 1000;

2.通过实例进行配置

axios.create();//通过这个方法来创建实例
//这个方法里边需要传递一个对象参数,这个参数也是我们要配置的一个对象
eg:
axios  create({
 baseURL:"https://....."
})    //这个方法会返回一个实例对象,这个实例对象会像axios一样被使用,我们用一个变量接收它
const  instance =  axios  create({
 baseURL:"https://....."
}) 
//但假如我们有a,b两个页面的话
const aInstance = axios.create({
baseURL:"https://....../a"
})
aInstance.get('/xxx');

const bInstance = axios.create({
baseURL:"https://....../b"
bInstance.get('/xxx');
})

配置的优先级:
全局<实例<请求(自己里边写的)

并发

比如一个大型的网站,肯定同时进行了不只一个请求,如果我们一个一个请求去写的话是不利于后期维护的。
并发就是同时进行多个请求,并统一处理返回值。

axios.all(iterable);
axios.spread(callback)
axios.all([
axios.get('/a');
axios.get('/b');
]).then(axios.spread((aRes,bRes)=>{
  console.log(aRes,bRes);
}))

axios拦截器

interceptors,在发起请求之前做一些处理,或者在响应回来之后做一些处理
拦截器分为:
1.请求拦截器
Vue(九) axios

axios.interceptors.request.use( conifg =>{
return config;
})

Vue(九) axios
Vue(九) axios

Vue(九) axios

2.响应拦截器
Vue(九) axios

3.移除拦截器

  axios.interceptors.response.eject(添加接受拦截器的变量名字)

Vue(九) axios

为axios实例添加拦截器

const instance = axios.create();
inatance.interceptors.resquest.use(config =>{})

本文地址:https://blog.csdn.net/xiaochumen0707/article/details/107889628