VueAxios的使用

1.1 安装axios依赖

npm i  axios

1.2在vue项目的main.js文件中引入axios

import axios from 'axios'
Vue.prototype.$axios = axios

1.3 代码的使用

<script>
import { login } from "@/Api/index";
export default {
data() {
    return {
        data:{
        phone:"15223455432",
        pwd:"hj123456"
     },
    }
},
created() {
    login(this.data).then((res) => {
        console.log(res)
    }).catch((err) => {
        console.log(err)
    });
},
}

 

 1.4 axios实例常用配置：

baseURL 请求的域名，基本地址，类型：String
timeout 请求超时时长，单位ms，类型：Number
url 请求路径，类型：String
method 请求方法，类型：String
headers 设置请求头，类型：Object
params 请求参数，将参数拼接在URL上，类型：Object
data 请求参数，将参数放到请求体中，类型：Object

1.5 axios的封装

1.5.1 axios的utils封装的request.js

import axios from "axios";
const request = axios.create({
    baseURL: "http://localhost:8088",
    timeout: 5000,
});
const update = axios.create({
    baseURL:"http://localhost:8089",
    timeout:5000
})
//请求拦截器
request.interceptors.request.use(
    (request) => {
        // let token = localStorage.getItem('token')
        // if (token) {
        //     console.log(request.headers);
        //     // 请求头携带token
        //     request.headers.Authorization = token;
        // }
        return request;
    },
    (error) => {
        Promise.reject(error);
    }
);
//响应拦截器
// request.interceptors.response.use(
//     (response) => {
//         return response.data
//     },
//     (error) => {
//         Promise.reject(error);
//     }
// );


export default request;

1.5.2 axios的API的index.js

​
import create  from "../utils/request";

export function login(data) {
    return create({
        url: '/user/login',
        method: 'post',
        changeOrigin:true,
        data:data
    })
}
export function update(data){
    return create({
        url: '/user/update',
        method: 'post',
        changeOrigin:true,
        data:data
    })
}

​

1.5.3  vue页面使用组件 

<template>
  <div>
    <h1>登录</h1>
  </div>
</template>

<script>
import { login } from "@/Api/index";
export default {
data() {
    return {
        data:{
        phone:"15223455432",
        pwd:"hj123456"
     },
    }
},
created() {
    login(this.data).then((res) => {
        console.log(res)
    }).catch((err) => {
        console.log(err)
    });
},
}
</script>

<style>

</style>

1.5.4   取消拦截

let instance = this.$axios.interceptors.request.use(config=>{
				config.headers = {
					token: ''
				}
				return config
			})
			
//取消拦截
this.$axios.interceptors.request.eject(instance);

1.5.5    错误处理

let source = this.$axios.CancelToken.source();
 
this.$axios.get('/goods.json',{
				cancelToken: source
			}).then(res=>{
				console.log(res)
			}).catch(err=>{
				//取消请求后会执行该方法
				console.log(err)
			})
 
//取消请求，参数可选，该参数信息会发送到请求的catch中
source.cancel('取消后的信息');

1.5.6 Ajax和Axios的区别

Ajax(Asynchronous JavaScript and XML)：

异步网络请求。Ajax能够让页面无刷新的请求数据。

实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。但各种方式都有利弊：

原生的XMLHttpRequest的配置和调用方式都很繁琐，实现异步请求十分麻烦
jQuery的ajax相对于原生的ajax是非常好用的，但是没有必要因为要用ajax异步网络请求而引用jQuery框架
Axios（ajax i/o system）：

这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。具备以下特点： 

在浏览器中创建XMLHttpRequest请求
在node.js中发送http请求
支持Promise API
拦截请求和响应
转换请求和响应数据
取消要求
自动转换JSON数据
客户端支持防止CSRF/XSRF(跨域请求伪造)

📚参考文章：
📖axios基本用法
📖Vue3 Ajax(axios) 菜鸟教程