1、axios的安装

//axios中文文档 https://www.axios-http.cn/docs/intro 
//使用npm$ 
npm install axios
//使用yarn
yarn add axios

2、axios的get请求

2.1、无参的get请求

//方法一
axios.get('url')
    .then(res=>{
        //打印请求成功的数据
        console.log(res.data)
    })
    .catch(err=>{
        //处理错误情况
    })
    .then(()=>{
        //总是会执行的
    })
//方法二
axios({
    url:'url',
    method:'get'
})
.then(res=>{
    //打印请求成功的数据
    console.log(res.data)
})
.catch(err=>{
    //处理错误情况
})
.then(()=>{
    //总是会执行的
})
//方法三
//async/await方法
async getUser()=>{
    try{
        const res = await axios.get(url);
        //打印请求成功数据
        console.log(res)
    }.catch(err) {
        console.error(error)
    }
}

2.2、有参的get请求

axios.get('url?id=123456')
    .then(res=>{
        //打印请求成功的数据
        console.log(res.data)
    })
    .catch(err=>{
        //处理错误情况
    })
    .then(()=>{
        //总是会执行的
    })
//方法二
axios({
    url:'url',
    method:'get',
    params:{
    id:123456
    }
})
.then(res=>{
    //打印请求成功的数据
    console.log(res.data)
})
.catch(err=>{
    //处理错误情况
})
.then(()=>{
    //总是会执行的
})
//方法三
//async/await方法
async getUser()=>{
    try{
        const res = await axios.get('url?id=123');
        //打印请求成功数据
        console.log(res)
    }.catch(err) {
        console.error(error)
    }
}

3、post请求

3.1、post请求基本使用

axios.post('url',{
    username:'username',
    pasword:'password'
})
.then(res=>{
    //请求成功
    console.log(res)
})
.catch(err=>{
    //处理错误的情况
})
//方法二
axios({
    url:'url',
    method:'post',
    data:{
        username:'username',
        password:'password'
    }
})
.then(res=>{
    //请求成功
    console.log(res)
})
.catch(err=>{
    //处理错误的情况
})

3.2并发请求

//方法一
axios.all([
    axios.get('url'),
    axios.get('url')
])
.then(res=>{
    //请求成功响应的是一个数组
    console.log(res[0])
    console.log(res[1])
})
.catch(err=>{
    console.log(err)
})
//方法二
axios.all([
    axios.get('url'),
    axios.get('url')
])
.then(
    axios.spread((res1,res2)=>{
        console.log(res1);
        console.log(res2);
    })
)
.catch(err=>{
    console.log(err)
})

4、axios的全局配置

//设置url前缀为http://localhost:8080
axios.defaults.baseURL="http://localhost:8080";
//设置超时时间5秒
axios.defaults.timeout=5000
//设置请求头
axios.defaults.headers={'content-type': 'application/x-www-form-urlencoded'}

5、axios的实例

const axios = axios.create({
    baseURL:"http://localhost:8080",
    timeout:5000,
    headers:{'content-type': 'application/x-www-form-urlencoded'}
})

6、axios的拦截器以及接口封装

axios给我们提供了两大类的拦截器，

一种是请求拦截（成功请求、失败请求）一种是响应拦截（成功的、失败的）

拦截器的作用 用于我们在网络请求的时候在发起请求或者响应时对操作进行响应的处理

发起请求时可以添加网页加载的动画 使用token认证时、去检查是否有token

响应的时候可以进行相应的数据处理

//导入axios
import axios from 'axios'

//创建axios实例
const http = axios.create({
    baseURL: "http://localhost:8080",
    timeout: 8000,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }
})

//request请求拦截
http.interceptors.request.use(config => {
    //判断token是否存在，存在则向请求头添加token信息
    if (sessionStorage.getItem("token")) {
        config.headers['Authorization'] = sessionStorage.getItem("token")
    }
    return config
}, err => {
    //对请求错误进行处理
    return Promise.reject(err)
})

//response响应拦截
http.interceptors.response.use(res => {
    return res.data
}, err => {
    //对响应错误进行处理
    return Promise.reject(err)
})


//get接口封装
export function get(url, params) {
    return new Promise((resolve, reject) => {
        http.get(url, params).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}

//post接口封装
export function post(url,date){
    return new Promise((resolve,reject)=>{
        http.post(url,date).then(res=>{
            resolve(res)
        }).catch(err=>{
            reject(err)
        })
    })
}

6.1、接口封装

import { post } from "../request/index"

//登录接口
export const Login = data => post("/api/login",data)

7、接口的使用

import {Login} from "../api/index"
import{ElMessage} from "element-plus"
import{useRouter} from "vue-router"

const router = useRouter()
const BtnLogin = async()=>{
    let res = await Login(userFrom)
    if(res.status == 200){
        sessionStorage.setItem("token",res.token)
        ElMessage({message:res.message,type:"success"})
        router.push("/")
    }else{
        ElMessage({message:res.message,type:"error"})
    }
}