vue 使用axios请求

import axios from 'axios'
import Vue from 'vue'

axios.defaults.baseURL = 'http://xxx.xxx.xxx:xxxx/';
axios.defaults.timeout = 30000;
axios.defaults.headers.post['Content-Type'] = 'application/json';

export function get(url, params) {
return new Promise((resolve, reject) => {
  axios.get(url, {
    params: params
  }).then(res => {
    resolve(res.data)
  }).catch(err => {
    reject(err.data)
  })
});
}

export function post(url, params) {
return new Promise((resolve, reject) => {
  axios.post(url, params, ).then(res => {
    resolve(res.data)
  }).catch(err => {
    reject(err.data)
  })
});
}
// 将请求方法挂在vue对象的原型上，到处都可以使用
Vue.use({
install: () => {
  Vue.prototype.$http = {get,post}
}
})

// 将所有api 放在api文件种进行管理
const api = data => this.$http.get('/route', data)

// 在页面中引入api，调用api的方法获取数据
api(params).then(res => {
console.log(res)
})

• 对new Promise的理解

function post(){
  return new Promise(resolve => {
    console.log(2222)
    get().then(res => {
      console.log(1111)
      resolve(res)
    })
  })
}

function get(){
  console.log(33333)
  return Promise.resolve({a: 1})
}

const api = data => post()


console.log(api())

执行的结果如下： 说明当api执行的时候返回的是Promise的状态，并且promise中方法也执行了， 当resolve执行的时候 api().then() 方法就会执行，resolve中的数据传递给then

promise