vue

手写promise二次封装axios

2019-08-01  本文已影响227人  劉䔳Fairy

axios

是什么??
axios是基于promise(诺言)用于浏览器和node.js是http客户端。
作用??
axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。
特点??
1,支持浏览器和node.js
2,支持promise
3,能拦截请求和响应
4,能转换请求和响应数据
5,能取消请求
6,自动转换JSON数据
7,浏览器支持防止CSRF(跨站请求伪造)

promise

是什么??
是一个对象用来传递异步操作的信息,它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的api,可供进一步的处理。
作用??
Promise的出现主要是解决地狱回调的问题,比如你需要结果需要请求很多个接口,这些接口的参数需要另外那个的接口返回的数据作为依赖,这样就需要我们一层嵌套一层,但是有了Promise 我们就无需嵌套
本质??
分离异步数据获取和业务

promise二次分装axios手写代码

import Axios from "axios";
class Http {
 //request 方法
  request(params) {
  return new Promise((resolve, reject) => {
     Axios({
     method: params.type || "get",
     url: params.url,
     data: params.data,
     headers: params.headers
      }).then(res => {
          if (res.data.code === 0) {
            resolve(res);
          } else {
            alert(res.data.msg);
          }
        }).catch(err => {
          reject(err.statusText); //失败
        });
    });
  }
}
export default Http;

写方法,获取接口

//引入封装好的axios
import Http from "../utils/http";
//实例化一个类
const _http = new Http();

//注册的请求
class Login {
//短信验证码
  login(mobile) {
    return _http.request({
      type:"post",
      url: `https://api.it120.cc/small4/verification/sms/get?mobile=${mobile}`,
      data:"",
      headers:""
    });
  }
}
//抛出
export default Login

使用接口时

//引入
import Product from "../services/product";
//实例化
const _product = new Product();
export default {
   created(){
      _product.CodeVerifier().then(res => {
      //res 就是响应回来的数据
        res.data.data;
    });
  }
}
上一篇 下一篇

猜你喜欢

热点阅读