基于vue封装axios请求

一、下载axios插件

npm install axios -S

下载慢的小伙伴可以使用淘宝镜像cnpm安装。
npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install axios -S

二、利用promise封装一个http请求（http.js）

//引入安装的axios插件
import axios from 'axios'

const http = options => {
  return new Promise((resolve, reject) => {
    const defaultOptions = {};
    const newOptions = {
      ...defaultOptions,
      ...options
    };
    //headers默认传递json格式数据，这里也可以设置token，每次调用都会携带
    newOptions.headers = {
      'content-Type': 'application/json;charset=UTF-8',
      ...newOptions.headers
    };
    //这里可以在调用的时候看到你的method、url、data、headers等参数
    //console.log(newOptions);
    axios({
      method: newOptions.method,
      url: newOptions.url,
      data: newOptions.data,
      headers: newOptions.headers
    }).then(res => {
      //根据返回的状态码判断，注意res返回的并不一定都是status，比如小程序就是statusCode
      if (res.status == 200) {
       //这里我们只需要获取返回的data中的数据即可
        resolve(res.data);
      } else {
        reject(res);
      }
    }).catch(err => {
      reject(err);
    })
  })
};

export default http

三、调用封装好的http文件（https.js在utils目录下）

import http from '@/utils/http'

http({
    //这里是你自己的请求方式、url和data参数
    method: 'post',
    url: url,
    data: {},
    //假设后台需要的是表单数据这里你就可以更改
    headers: {
      "Content-Type":"application/x-www-form-urlencoded;charset=UTF-8"
    }
  }).then(function (res) {
    console.log(res);
  }).catch(function (err) {
    console.log(err);
  });