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)}) 復制代碼

總結

以上是生活随笔為你收集整理的vue 使用axios的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。