Vue中Axios参数传递 与 请求拦截 的封装

目录

什么是Axios？   

Axios普通写法：

如何封装Axios：

后续  封装一个request请求拦截

---

什么是Axios？   

Axios 是一个基于 promise 的 HTTP 库，可以发送get，post，put，delete请求，可以用在浏览器和 node.js 中。

axios的官网：axios中文网|axios API 中文文档 | axios

---

Axios普通写法：

1.下载axios 命令：npm install axios --save 

2.在main.js中进行引用

import axios from 'axios'
Vue.prototype.$axios = axios;
new Vue({
  axios,
  render: (h) => h(App),
}).$mount("#app");

3.在app页面的用法和参数传递

  //普通的写法
    this.$axios.get("http://localhost:8081/api/user")
      .then((res) => {
        console.log(res);
      })
      .catch((error) => {
        console.log(error);
      });


 //get请求传参数：
 //第一种传参方式  ?号传参
    this.$axios
      .get("http://localhost:8081/api/user?ID=12345&&Name='Yzz'")
      .then((res) => {
        console.log(res);
      })
      .catch((error) => {
        console.log(error);
      });

    //第二种传参方式  params传参数
    this.$axios
      .get("http://localhost:8081/api/user", {
        params: {
          ID: 12345,
          Name: "Yzz",
        },
      })
      .then((res) => {
        console.log(res);
      })
      .catch((error) => {
        console.log(error);
      });


  //post请求传参数：
   this.$axios
      .post("http://localhost:8081/api/user", {
        ID: 12345, //参数ID
        Name: "Yzz", //参数Name
      })
      .then(function(res) {
        console.log(res);
      })
      .catch(function(error) {
        console.log(error);
      });

---

如何封装Axios：

1.下载axios 命令：npm install axios --save 

2.在main.js中引用

import axios from 'axios'
Vue.prototype.$axios = axios;
axios.defaults.baseURL = 'http://localhost:8081/api/user';  //接口封装    公共接口
new Vue({
  axios,
  render: (h) => h(App),
}).$mount("#app");

3.新建一个api文件夹里面新建一个api.js，在api.js中写

import request from '@/utils/request'  //请求拦截
export function login(data) {
    return request ({
        method: 'post',        //请求的类型   
        url: '/user/login',    //剩下的接口    
        data                   //传的参数
    })
}

//http://localhost:8081/api/user/{myId}  原本的接口样子
export function order(myId) {
    return request ({
        method: 'get',                //请求的类型   
        url: '/user/order/' + myId,   //剩下的接口   传的参数
    })
}

export function list(data) {
    return request ({
        method: 'get',        //请求的类型   
        url: '/user/list',    //剩下的接口    
        params:data           //传的参数
    })
}

4.在页面中的用法和参数的传递

<script>
export default {
  import { login , list ,order} from "";   //引用  用哪个 { 就写哪个 }
  data() {
    return {
      data: {
        Id: 123,
        Name: "yzz",
      },
      myId:456
    };
  },
  mounted(){
    //普通的写法
     login().then(res=>{
       console.log(res)
     }).cath(error=>{
       console.log(error)
     })

  //post传参数
    login(this.data).then(res=>{
       console.log(res)
     }).cath(error=>{
       console.log(error)
     })

 //get传参数
    order(this.myId).then(res=>{
       console.log(res)
     }).cath(error=>{
       console.log(error)
     })
  }
};
</script>

5.新建一个request.js文件（后续单独介绍请求拦截）

//根据实际情况项目需求和后端返回的参数进行

import axios from "axios";  //axios
axios.defaults.baseURL = 'http://localhost:8081/api/user';//接口封装
import { getToken } from '@/utils/token.js' //引用token
import { Message } from 'element-ui'
//请求拦截
axios.interceptors.request.use(config => {
    //发送请求前，获取token的值
    config.headers['token'] = getToken()
    return config
}, function (error) {
    //请求错误抛出异常
    return Promise.reject(error)
})

//响应拦截
axios.interceptors.response.use(response => {
    //响应数据
    if (response.data.code !== 20000) {
        if (response.data.code == 10001) {
            Message({
                message: 'token不存在或已过期，请重新登录',
                type: 'warning',
                duration: 2000
            });
        } else {
            Message({
                message: response.data.message,
                type: 'warning',
                duration: 2000
            });
        }
    }
    return response
}, function (error) {
    //响应数据错误
    Message({
        message: error.message,
        type: 'error',
        duration: 2000
    });
    return Promise.reject(error)
})

export default axios

---

后续（封装一个request请求拦截）

新建一个request.js文件夹

import axios from "axios";  //引用axios
axios.defaults.baseURL = 'http://localhost:8081';//接口封装
import { Message } from 'element-ui'   //elementUI中的一个提示框
//请求拦截
axios.interceptors.request.use(config => {
    //发送请求前在请求头添加token
    config.headers['token'] = sessionStorage.getItem('toekn')    //获取token的值（根据实际情况来定）
    return config
}, function (error) {
    //请求错误抛出异常
    return Promise.reject(error)
})

//响应拦截
axios.interceptors.response.use(response => {
    //响应数据

    //根据实际情况项目需求和后端给的参数进行判断
    if (response.data.code !== 200) {
        if (response.data.code == 201) {
            Message({
                message: 'token不存在或已过期，请重新登录',
                type: 'warning',
                duration: 2000
            });
        } else {
            Message({
                message: response.data.message,
                type: 'warning',
                duration: 2000
            });
        }
    }
    return response
}, function (error) {
    //响应数据错误
    Message({
        message: error.message,
        type: 'error',
        duration: 2000
    });
    return Promise.reject(error)
})

export default axios