vue 使用axios

丿歌頌者發表於2018-11-30
VueiOS

axios

基於http客戶端的promise，面向瀏覽器和nodejs

特點

  • 從瀏覽器中建立 XMLHttpRequests
  • 從 node.js 建立 http 請求
  • 支援 Promise API
  • 攔截請求和響應
  • 轉換請求資料和響應資料
  • 取消請求
  • 自動轉換 JSON 資料
  • 客戶端支援防禦 XSRF

安裝

使用 npm:

$ npm install axios
複製程式碼

使用bower：

$ bower install axios
複製程式碼

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
複製程式碼

為了解決post預設使用的是x-www-from-urlencoded 去請求資料，導致請求引數無法傳遞到後臺，所以還需要安裝一個外掛QS

$ npm install qs
複製程式碼

一個命令全部解決

$ npm install --save axios vue-axios qs 
複製程式碼

開始使用

在main.js中引入

import axios from 'axios'
import qs from 'qs' 
Vue.prototype.$axios= Axios
Vue.prototype.$qs = qs
複製程式碼

axios基礎配置

// axios 配置
axios.defaults.timeout = 5000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
axios.defaults.baseURL = url
// 這裡的url指介面地址
複製程式碼

將請求資料封裝在api.js內

封裝Post請求

export function Post (url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
        if (response.data.status === 200) {
          resolve(response.data)
        } else {
          Toast({
            message: response.data.msg
          })
        }
      }, err => {
        reject(err)
        Toast({
          message: '操作異常'
        })
      })
      .catch((error) => {
        reject(error)
        Toast({
          message: '操作異常'
        })
      })
  })
}
複製程式碼

封裝get請求

export function Get (url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, params)
      .then(response => {
        if (response.status === 200) {
          resolve(response.data)
        } else {
          Toast({
            message: response.data
          })
        }
      }, err => {
        reject(err)
        Toast({
          message: '操作異常'
        })
      })
      .catch((error) => {
        reject(error)
        Toast({
          message: '操作異常'
        })
      })
  })
}
複製程式碼
export default {
  register (params) {
    // 註冊
    return Post('/user/register', params)
  }
 }
複製程式碼

post請求示例

在main.js內進行配置後全域性即可引用

Vue.prototype.$api = api
複製程式碼

在呼叫介面的.vue頁面內引入

import api from '../../assets/js/api'
複製程式碼
let code = this.$qs.stringify({
  number: this.phone
})
api.register(code)
  .then((res) => {
    console.log(res)
  })
複製程式碼

相關文章