Axios

专注于网络请求的库

axios 中文网:
http://www.axios-js.com/zh-cn/docs/

下载

npm i axios -S

yarn add axios -S

导入

import axios from "axios";

基本配置

/* 默认请求类型 */
axios.defaults.method = 'GET';

/* 接口根路径 */
axios.defaults.baseURL = "http://localhost:7080";

/* post 请求数据传输格式 */
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

/* 请求超时 */
axios.defaults.timeout = 3000;

基本语法

axios({
  method: '请求类型',
  url: '请求路径',
  params: {}, // get 请求参数
  data: {} // post 请求参数
}).then((result) => {
 console.log(result);
}).catch((err) => {
    console.log(err);
})

params 内保存的是 get 请求参数，即查询参数

data 内保存的是 post 请求参数，即请求体参数

result 是axios包装过的数据

result.data 才是后台服务器发送的数据

async & await

当方法返回值为 Promise 实例

可以在该方法前面使用 await ，将返回的 Pormise 实例以对象的格式返回

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

async function() {
 await axios({
   method: '请求类型',
        url: '请求路径',
        params: {}, // get 请求参数
        data: {} // post 请求参数
 })
}

方法

const getRuslt = await axios.get('url',{
 params:{id: 1}
})

const postRuslt = await axios.post('url',{
 data:{id: 1}
})

Vue 挂载

Vue.prototype.$http = axios;