Vue笔记 （四）axios使用

axios 是一个轻量的 HTTP客户端

一、使用

//导入
import axios from 'axios'
//发送请求
axios({
           
  url:'xxx',    // 设置请求的地址
  method:"GET", // 设置请求方法
  params:{
         // get请求使用params进行参数凭借,如果是post请求用data
    type: '',
    page: 1
  }
}).then(res => {
     
  // res为后端返回的数据
  console.log(res);   
})

并发请求：

function getUserAccount() {
   
    return axios.get('/user/12345');
}
function getUserPermissions() {
   
    return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
    .then(axios.spread(function (res1, res2) {
    
    // res1第一个请求的返回的内容，res2第二个请求返回的内容
    // 两个请求都执行完成才会执行
}));

二、封装

协商好一些约定：接口请求前缀，请求头，状态码，请求方法，请求拦截器，响应拦截器，请求超时时间

1. 接口请求前缀（开发、测试、生产）：

if (process.env.NODE_ENV === 'development') {
   
  axios.defaults.baseURL = 'http://dev.xxx.com'
}