axios基本运用

一、理论

1、axios用来请求后端接口，常用get post all 三种方法

2、传参分为body传参和query传参

3、body通过对象传，query地址栏拼接传参

二、应用

1、下载：npm i axios --save

2、引入：import axios from "axios";

三、axios常用传参

axios({ url:'后端服务器地址+接口地址', method:'请求方法（post、get、all）','请求参数'})
axios.get({ url:'后端服务器地址+接口地址','请求参数'})

1、body传参

写法1：（data是请求参数）

export function userInfo(data){
 return axios({url:'https://some-domain.com/api/userInfo',method:'post',data})
}

写法2：

export function userInfo(data){
  return axios.post({url:'https://some-domain.com/api/userInfo',data})
 }

2、query传参

写法1：（data是请求参数）

export function userInfo(data) {
  return axios({ url: 'https://some-domain.com/api/userInfo' + data, method: 'post' })
}

写法2：

export function userInfo(data){
  return axios.post({url:'https://some-domain.com/api/userInfo'+ data})
 }

四、调用

//引入
import{userInfo}from'@/api'
// 调用
userInfo({id:1}).then(res=>{
  let {code}=res
  console.log(code);
}).finally(()=>{
  // 接口结束后做的操作
})

五、封装

1、工具层（utils/axios.js）

3步骤（1设置公共地址、2请求拦截-设置请求头、3响应拦截）

2、接口函数层 （api.js)

2步骤（1、引入axios.js文件、封装函数）

3、应用层

2步骤（引用api.js文件，调用方法）

4、具体三层封装参考

axios三层封装-CSDN博客