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