axios应用

axios是一个基于Promise的HTTP库  可以用在浏览器和Node.js中。

模块化开发 使用npm安装方式   

npm install axios

在vue脚手架项目中使用 可以再main.js文件中导入axios 并绑定到vue的原型链上 代码如下：

import Vue from 'vue'

import axios from "axios"

Vue.prototype.$axios=axios;

之后在组件内就可以通过 this.$axios 调用axios的方法请求。

此外可以讲axios结合vue-axios插件一起使用，该插件只是将axios集成Vue.js的轻度封装，本身不能独立使用，可以如下的命令一起安装axios和vue-axios

npm install axios vue-axios

安装可vue-axios插件后 就不需要将axios绑定到vue的原型链上了。使用如下

import Vue from 'vue'

import axios from "axios"

import VueAxios from "vue-axios"
Vue.use(VueAxios,axios)  //安装插件 

之后组件就可以通过this.axios来调用axios的方法发送请求了。

 

 HTTP最基本的请求就是get请求和post请求。使用axios发送个体其你去调用形式如下：

 

     import { getToken } from '@/utils/auth'
   import axios from 'axios'
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
   const baseURL=process.env.VUE_APP_BASE_API;

 

 

 

// 1.axios基础请求

      axios({
          url:`${baseURL}/exam/planJob/listWithCount?examPlanId=${this.examPlan.id}`,
        }).then(res=>{
          console.log("请求成功：",res);
          this.planJobList = res.rows;
        }).catch(error=>{
           console.log("请求失败：",error);
        })

 // 2.可选地，上面的请求可以这样做 避免在路径后面拼接？ &&这样的查询字符转

      axios({
          url:`${baseURL}/exam/planJob/listWithCount`,
          params:{
              examPlanId:this.examPlan.id
          }
        }).then(res=>{
          console.log("params请求成功：",res);
          this.planJobList = res.rows;
        }).catch(error=>{
           console.log("params请求失败：",error);
        })

3. axios请求方法提供了别名  get请求

   axios.get(`${baseURL}/exam/planJob/listWithCount?examPlanId=${this.examPlan.id}`)
            .then(function (response) {
              console.log("get请求成功：",response);
            })
            .catch(function (error) {
              console.log("get请求error：",error);
            });

4. axios请求方法提供了别名  get请求 params

 axios.get(`${baseURL}/exam/planJob/listWithCount`,{
           params:{
             examPlanId:this.examPlan.id
           }
         })
          .then(function (response) {
            console.log("get params请求成功：",response);
          })
          .catch(function (error) {
            console.log("get params请求error：",error);
          });

 

axios.post('/user', {
    firstName: 'Mike',
    lastName: 'Allen'
  }).then(res => {
    console.info(res)
  }).catch(e => {
    console.info(e)
  })
  ​
  // 等同于以下写法
  axios({
    url: '/user',
    method: 'POST',
    data: {
      firstName: 'Mike',
      lastName: 'Allen'
    }
  }).then(res => {
    console.info(res)
  }).catch(e => {
    console.info(e)
  })
  ​
  ​
  axios.post('/user', {
      firstName: 'Fred',
      lastName: 'Flintstone'
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });

 vue中有一个拦截方法，当我们发起请求或者请求回来的时候，我们需要做一定的数据过滤或者拦截, 或者加载一个loading， 或者是针对于404、500等状态码报错， 跳转到指定的相应路径中

在请求或响应被 then 或 catch 处理前拦截它们。

  // 添加请求拦截器
  axios.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么
      return config;
    }, function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
    });
  ​
  // 添加响应拦截器
  axios.interceptors.response.use(function (response) {
      // 对响应数据做点什么
      return response;
    }, function (error) {
      // 对响应错误做点什么
      return Promise.reject(error);
    });

 

例子：请求拦截器  在axios的请求拦截器中携带tooken进行请求

axios.interceptors.request.use(config=>{
    const token=localStorage.getItem('token')
    // if(token){
        token?config.headers.Authorization=token:null;

    // }
    return config
});