vue 使用axios

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)
  })
複製代碼