vue中使用axios+Promise二次封装ajax请求

为了实现向ios中block封装请求的异步的效果，我采用JavaScript中promise这个对象。其中resolve,reject就相当于是你定义了两个block，然后把数据传出去。

Promise 简述 

1、Promise 是一种异步的解决方案 

2、分为三个状态，进行中，已成功（resolve），已失败（rejected） 

三种状态: 

pending：进行中 

fulfilled :已经成功 

rejected 已经失败 

3、两种结果，从进行中到已成功，或者是从进行中到已失败 

从pending变为fulfilled 

从pending变为rejected。 

4、Promise可以解决回调地狱问题， 

何为回调地狱？ 

也就是ajax在请求数据的时候，一个数据被请求下来的时候又继续请求第二个数据，这时这个数据跟上一个数据有关联，那么ajax会一直嵌套下去，这时就会产生回调地狱问题

功能特性

在浏览器中发送 XMLHttpRequests 请求

在 node.js 中发送 http请求

支持 Promise API

拦截请求和响应

转换请求和响应数据

自动转换 JSON 数据

客户端支持保护安全免受 XSRF 攻击

使用 npm:

$ npm install axios

 

请求方法别名

为方便起见，我们为所有支持的请求方法都提供了别名

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

注意

当使用别名方法时， url、 method 和 data 属性不需要在 config 参数里面指定。

并发

处理并发请求的帮助方法

axios.all(iterable)

axios.spread(callback)

创建一个实例

你可以用自定义配置创建一个新的 axios 实例。

axios.create([config])

引入

在项目中新建一个request.js文件封装请求方法

// request.js
import axios from 'axios'
// 一些请求的基本配置 
const serviceHttp = axios.create({
  baseURL: process.env.API_ROOT,// 接口的域名地址
    // timeout: 5000,
    withCredentials: true,
    headers: {'Content-Type': 'application/json;charset=utf-8'}
})

// 添加一个请求拦截器 一般用于验证是否登陆
serviceHttp.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });
 
// 添加一个响应拦截器
serviceHttp.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });
 /*options包含请求参数
    options = {
      url,
      method,
      data
    }
*/
// 输出方法
export default function fetchApi(options) {
  return new Promise((resolve, reject) => {
    serviceHttp ({
      url：options.url,
      method：options.method,
      data：options.data
    })
      .then(res => {
        console.log('返回数据', res)
        resolve(res.data)
      })
      .catch(error => {
        reject()
        console.error(error)
      })
  })

然后在新建一个http.js文件，用于放接口

// http.js
import fetchApi from '@/util/request'
 
const Http= {
  // 接口1
  getData(data) {
    return fetchApi('getData/list', data)
  },
  // 接口2
  addData(data) {
    return fetchApi('data-list/add', data)
  }
}

export default Http

在组件中使用

// dataManage.vue
import Http from '@/http.js'
 
methods: {
    initData(){
      let data = {"pageSize":10,"pageNum":1} //请求参数
      Http.getData(data).then(res => {
        //请求成功
      }).catch(err => {
           //请求失败
      })
    }