axios在vuecli中的基本使用

axios基本用法axios({url: 'http://123.207.32.32:800o/ home/multidata ',method :"get"}).then(res =>{console.log(res);})axios.method():可以选择请求方法,，默认为getget请求的参数：可直接写在url里：http://walawala?username=zhangsana

西红柿炒芭娜娜

605人浏览 · 2021-07-26 11:08:58

西红柿炒芭娜娜 · 2021-07-26 11:08:58 发布

axios

基本用法

axios({
	url: 'http://123.207.32.32:800o/ home/multidata ',
	method :"get"
}).then(res =>{
console.log(res);
})

axios.method():可以选择请求方法,，默认为get

get请求的参数：

可直接写在url里：http://walawala?username=zhangsan
axios有专门针对get请求的参数拼接

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

post转参数：请求体

并发请求

如果需要从服务器取得多个数据，并且这些数据都取得的时候再执行下一步，应该怎么做？

基本格式：axios.all().then()
```
axios.all([axios(),axios()]...).then()
```

配置信息

每次请求参数时都要传递url，当url有多次重复的时候可以通过抽取固定参数或者利用axiox的全局配置。

axios.defaults的使用
例如:

axios.defaults.baseUrl = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000
axios({
	url: '/home/multidata',
	method :"get",
	params:{
		type:'pop',
		page:1
}
}).then(res =>{
console.log(res);
})

常见的配置选项

axios的封装

这里用一个笑话接口作为例子，封装axios

接口描述：/*接口:随机获取一条笑话

请求地址:https://autumnfish.cn/api/joke

请求方法:get

请求参数:无

响应内容:随机笑话*/

封装axios实例：

import axios from 'axios'
function request(config) {
    //创建axios实例
    const instance = axios.create({
        baseURL: 'https://autumnfish.cn',
        timeout: 5000
    })

    return instance(config)
}

export default request

在GetJoke.vue中调用request方法，并传入相应配置

 getJoke: function () {
      request({
        url: "/api/joke",
      })
        .then((res) => {
          this.joke = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

axios拦截器

请求拦截

 instance.interceptors.request.use(
     (config) => {
     return config;
     },
     (err) => {
     console.log(err);
     })

注意：在拦截成功后要返回拦截的数据，否则请求会失败。

响应拦截

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