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)
  })
复制代码