Axios基础

axios

axios是一个专注于网络请求的库，基本语法如下

axios({
    method:'post/get',
    url:'xxx'，
    //url中带的参数即get传递的数据
    params：{}，
    //post传递的参数即请求体参数
    data:{},
}).then((result)=>{
    //.then用来指定请求成功后的回调函数
})

promise对象可以调用then方法，axios返回的真实数据在xxx.data下

优化

如果调用某个方法返回的是promise方法，前面可以加await

await方法只能用用在被async修饰的方法中

使用结构赋值把请求的大对象的data属性（即真实的数据）解构出来，再进行重命名，最后通过重命名的对象的data中拿出数据

解构赋值可以使用:进行重命名

const {data:res} = await axios({
​
    method:'post/get',
​
    url:'xxx'，
​
    //url中带的参数即get传递的数据
​
    params：{}，
​
    //post传递的参数即请求体参数
​
    data:{},
​
});
consolr.log(res.data);

axious.get

const {data:res} = await axios.get('url',{
    params:{
        //参数
    }
})

axious.post

const {data:res} = await axios.post('url',{params})

简化axios请求

在vue的原型上挂载axios，后续组件需要使用则不需要导入axios，直接调用this.$http，方法是在main方法内导入axios并使用原型挂载，并将请求路径进行全局配置

//在main.js导入axios
import axios from 'axios'
//配置根路径
axios.defaults.baseURL='根路径'
//把axios挂载到.vue原型
Vue.prototype.$http=axios

此方法的缺点是无法实现API接口的复用

封装request.js

import axios from 'axios'
​
const request = axios.create({
  baseURL: 'https://www.escook.cn'
})
​
export default request

封装发请求的函数

import request from '@/utils/request.js'
​
// 按需导出api
export const getArticleAPI = function(_page, _limit) {
  return request.get('/articles', {
    params: {
      _page,
      _limit
    }
  })
}

在需要使用api的组件内按需导入

import { getArticleAPI } from '@/api/articleAPI.JS'