博客

一、axios是什么？

axios是基于promise对ajax的封装

ajax MVC

axios MVVM

二、axios的基本使用

1、默认请求方式

//使用默认方式发送无参请求，默认情况下是get请求
    myaxios(){
     this.axios({
      url: 'http://api.tianapi.com/petnews/index',
    }).then((res)=>{
      console.log(res);
    }).catch(err =>{
      console.log(err);
    })
    }

//使用默认方式发送有参请求，默认情况下是get请求
  myaxios(){
     this.axios({
      url: 'http://api.tianapi.com/petnews/index?key=fa5333a78c6388b7ef9104915d37c898&num=10',
    }).then((res)=>{
      console.log(res);
    }).catch(err =>{
      console.log(err);
    })

2、get请求

//使用请求方式为get的无参请求
    myaxios(){
     this.axios({
      method:'get'
      url: 'http://api.tianapi.com/petnews/index',
    }).then((res)=>{
      console.log(res);
    }).catch(err =>{
      console.log(err);
    })
}

//使用请求方式为get的有参请求
    myaxios(){
     this.axios({
      method:'get'
     url: 'http://api.tianapi.com/petnews/index?key=fa5333a78c6388b7ef9104915d37c898&num=10',
    }).then((res)=>{
      console.log(res);
    }).catch(err =>{
      console.log(err);
    })
    }

//使用get的有参请求 使用params
 myaxios(){
     this.axios({
       method:'get',
      url: 'http://api.tianapi.com/petnews/index',
      params:{
        key:'fa5333a78c6388b7ef9104915d37c898',
        num:'10'
      }
    }).then((res)=>{
      console.log(res);
    }).catch(err =>{
      console.log(err);
    })
    }

注：

使用params传参会默认将传递的参数进行拼接，是界面更简洁明了

3、post请求

//使用请求方式为post的无参请求
    myaxios(){
     this.axios({
      method:'post'
      url: 'http://api.tianapi.com/petnews/index?key=fa5333a78c6388b7ef9104915d37c898&num=10',
    }).then((res)=>{
      console.log(res);
    }).catch(err =>{
      console.log(err);
    })
    }

//使用请求方式为post的有参请求
    myaxios(){
     this.axios({
      method:'post'
      url: 'http://api.tianapi.com/petnews/index',
    }).then((res)=>{
      console.log(res);
    }).catch(err =>{
      console.log(err);
    })
    }

//使用请求方式为post的有参请求 使用params
myaxios1(){
      this.axios({
      url:'https://api.seniverse.com/v3/life/suggestion.json',
      method:'POST',
      params:{
          key:'SCYrvkytJze9qyzOh',
          location:'shanghai',
          language:'zh-Hans'
      }
        
      }).then(res =>{
        console.log(res);
      })
    }

三、axios的请求方式

1、axios.get

// 使用axios.get发送无参请求
    my1(){
      this.axios.get(
        'http://api.tianapi.com/petnews/index'
        ).then(
        res =>{
          console.log(res);
        }
      )
    }

 // 使用axios.get发送有参请求
    my1(){
      this.axios.get(
      'http://api.tianapi.com/petnews/index',
      {params:{key:'fa5333a78c6388b7ef9104915d37c898',num:10}}).then(
        res =>{
          console.log(res);
        }
      )
    }

2、axios.post

// 使用axios.post发送无参请求
    my2(){
      this.axios.post('https://api.seniverse.com/v3/life/suggestion.json?key=SCYrvkytJze9qyzOh&location=shanghai&language=zh-Hans').then(
        res =>{
          console.log(res);
        }
      )
    }

四、axios的并发请求

// 使用axios的并发请求
    my2(){
      this.axios.all([
        this.axios.post('https://api.seniverse.com/v3/life/suggestion.json?key=SCYrvkytJze9qyzOh&location=shanghai&language=zh-Hans'),
        this.axios.get('http://api.tianapi.com/petnews/index?key=fa5333a78c6388b7ef9104915d37c898&num=10')
      ]).then(
        res =>{
//请求成功返回一个数组包含两个请求响应的数据
          console.log(res);
        }
      ).catch(err =>{
        console.log(err);
      })
    }

注：使用axios的spread可以将并发请求的参数分别获取

// 使用axios的并发请求
    my2(){
      this.axios.all([
        this.axios.post('https://api.seniverse.com/v3/life/suggestion.json?key=SCYrvkytJze9qyzOh&location=shanghai&language=zh-Hans'),
        this.axios.get('http://api.tianapi.com/petnews/index?key=fa5333a78c6388b7ef9104915d37c898&num=10')
      ]).then(
        // 使用axios的spread可以将并发请求的参数分别获取
          this.axios.spread((res1,res2) =>{
              console.log(res1)
              console.log(res2)
          })
      ).catch(err =>{
        console.log(err);
      })
    }

五、axios的实例

1、创建axios实例

–在requerst.js文件里面创建axios实例

//引入axios
import axios from 'axios'
// 创建axios的实例
const requerst = axios.create({
        baseURL:'/api',
        timeout:5000
})
//对外暴露这个文件
export default requerst;

2、引用axios实例

创建一个文件引入并使用axios实例（方便后期管理）

import requerst from './requerst'
export const getData = () =>{
    return requerst({url:'/cart/cartList',method:'get'})
}

3、调用接口

  mytest3(){
      getData().then(res =>{
        console.log(res);
      })
    }

六、axios的拦截器

拦截器的作用：用于我们发送请求或者响应时对操作进行相应的处理

axios为我们提供了两种拦截器
1、请求拦截器（请求成功、请求失败）
2、响应拦截器（成功的响应、失败的响应）

1、请求拦截器

import axios from 'axios'
import { config } from 'shelljs';
// 创建axios的实例
const requerst = axios.create({
        baseURL:'/api',
        timeout:5000,
})
//请求拦截器
requerst.interceptors.request.use(config =>{
    // 请求拦截器成功的响应
    console.log('这是请求拦截器');
    console.log(config);
    return config
},err =>{
    // 请求拦截器失败的响应
    console.log('失败');
    console.log(err);
})
// 响应拦截器
export default requerst;

2、响应拦截器

import axios from 'axios'
import { config } from 'shelljs';
// 创建axios的实例
const requerst = axios.create({
        baseURL:'/api',
        timeout:5000,
})
//响应拦截器
requerst.interceptors.response.use(config =>{
    // 请求拦截器成功的响应
    console.log('这是响应拦截器');
    console.log(config);
    return config
},err =>{
    // 响应拦截器失败的响应
    console.log('失败');
    console.log(err);
})
// 响应拦截器
export default requerst;