vue使用axios

下载

npm install axios --save-dev

引用

import axios from 'axios'

封装

新建一个js文件用于放封装函数(util/http.js)

//设置axios请求的默认host
//axios.defaults.baseURL = 'https://wechat.kayunzh.com'
import axios from 'axios'
import qs from 'qs'
let merge = require('webpack-merge') //合并对象的方法，类似于Object.assign();

// axios.defaults.baseURL= 'http://test.ky162.com:9000/'
let base =  'http://test.ky162.com:9000/'
var http = {
  request:(url, method, data, headers, isjson)=>{
      return new Promise((resolve,reject)=>{
        let headerDefult = {
          "content-type": "application/x-www-form-urlencoded", //根据需要设置请求头
        }
        headers = merge(headerDefult, headers)
        data = isjson? data: qs.stringify(data)   //传入的数据是否为json格式
        axios({
          method, //请求方式
          baseURL:base, //域名
          url:url, //接口地址
          data, //数据
          timeout: 5000, //请求超时的时间，（超时后会进入catch）
          headers, //请求头
        })
        .then(res=>{
          if(res.status == 200){
            resolve(res.data)
          }else{
            reject( res && res.data || '')
          }
        })
        .catch(e=>{
          reject(e)
        })
      })
  }
}

export default {
  post(url, data = {}, headers = {}, isjson = false) {
    return http.request(url, "post", data, headers, isjson)
  },
  get(url, params = {}, headers = {}) {
    return http.request(url, "get", params, headers, false)
  },
}

引入

//main.js中引入，
import http from '@/utils/http';//axios封装

Vue.prototype.$http = http //将封装的请求方法注入到vue原型上

使用

//组件内
//get请求方式
this.$http.get()
//post请求方式
this.$http.post()