axios基础及请求传参

axios基础使用及组件传参

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中

参考官方文档：https://github.com/axios/axios

1、安装

// 使用npm
npm install axios --save

// 使用yarn
yarn add axios

2、引用

Vue-cli 中单个组件引入（ES6）

import axios from 'axios'

如果要全局使用axios就需要在main.js中设置成全局的，然后再组件中通过this调用

Vue.prototype.$axios = axios;

this.$axios.get();

3、使用

如果发送一个简单的请求，且没有参数（也可以写为axios('url').then().catch()，axios默认get请求）

import axios from axios
 
// 发送一个简单的Http请求
axios.get('url')            // url为http的请求地址
  .then((res)=> {
    console.log(res)     // then用于处于成功事件，res为服务端返回的数据
  })
  .catch((err)=> {
    console.log(err);    // cathch用于处理错误事件
  })

发送多个axios请求

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) {
    // 当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果
}));

如果需要携参请求，例如我请求的后端接口为：/user?ID=12345，该接口需要参数ID的值，可以采用以下三种方式：

// 使用get请求
axios.get('/user', {
    params: {
      ID: 12345
    }
})

// 使用get请求
axios({
  method: 'get',
  url: '/user',
  params: {
    ID: 12345
  }
});

//  使用post请求
axios({
  method: 'post',
  url: '/user',
  data: {
    ID: 12345
  }
});

后两种方式，get请求和post请求参数分别对应params和data，为一个对象，后端服务器可以直接取到参数中的字段。

如果采用函数形式封装axios请求，param为getUser传入的参数，应该为一个对象：

function getUser (param) {
  return axios({
    method: 'get',
    url: '/user',
    params: param
  })
}

采用async/await的形式

async function getUser (param) {
  try {
    const res = await axios.get('/user', {
      params: param
    })
    console.log(res)
  } catch (err) {
    console.error(err)
  }
}

http://10.194.101.47:8093/ctm02osss/getCameraInfo?regionIndexCode=9973ad2e-8dde-4cb5-bda2-f9023d24f0d1&pageNo=1