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