axios请求

一、了解Ajax

Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。

Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

二、axios是什么

Axios，是一个基于promise [5]的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。

三、使用axios

1、导入依赖

npm install axios

2、封装axios

request.js

import axios from 'axios'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const instance = axios.create({
    //请求的基础路径
    baseURL:"http://localhost:8080/account",
    //超时时间（毫秒）
    timeout:10000
})

//请求拦截器
instance.interceptors.request.use(
    config =>{
        //请求前设置请求信息
        config.headers['Content-Type'] = 'application/json;charset=utf-8'
        // let token = window.localStorage.getItem('token')
        // if(token != null){
        //     config.headers.set('token',token)
        // }
        //设置完成后必须返回config
        return config
    },
    error =>{
        console.log(error.message)
        return Promise.reject(error)
    }
)

//返回拦截器
instance.interceptors.response.use(
    (response) => {
        //响应状态码为200时执行
        //提取token
        // const localtoken = window.localStorage.getItem("token")
        // if(localtoken == null){
        //     let token = response.data.data.token
        //     if(token != null){
        //         console.log(token)
        //         //将token存入localstorage
        //         window.localStorage.setItem('token',token)
        //     }
        // }

        //未登录则清空token
        // let code = response.data.code
        // if(code == 401){
        //     window.localStorage.removeItem("token")
        // }

        // let res = response.data
        // if(typeof res === 'string'){
        //     res = res ? JSON.parse(res) : res
        // }
        // console.log(res)
        let code = response.data.code
        if(code == 200){
            let messages = response.data.message
            ElMessage({
                message: messages,
                type:'success'
            })
        }else{
            let messages = response.data.message
            ElMessage({
                message: messages,
                type: 'error'
            })
        }
        return response
    },
    (error) => {
        //返回异常处理
        console.log(error.message)
        //最后一定要返回一个promise
        return Promise.reject(error)
    }
)



//向外导出
export default instance

在这里我们将axios封装成我们自定义的对象，使用时只需要引用request.js即可

3、使用axios发起请求

<script>
import {ref} from 'vue'
import request from 'request.js'

//定义接收数据对象
const result = ref({})

//POST请求
const postRequest = async() => {
    return request.post('/hello',value)  // '/hello'是请求路径，是拼接在我们统一定义的请求头后面,value是json传参携带的对象
}

//GET请求
const getRequest = async() => {
    return request.get('/hello',{
    params:{
        size:2 //这是param传参时携带的数据，key:value类型
}
})
}

//调用接口请求数据
const upload = async()=>{
    //post请求，get一样的步骤
    const {data} = await postRequest()
    result.value = data
}

</script>