手写promise二次封装axios @劉䔳

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;
    });
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Axios是近几年非常火的HTTP请求库,官网上介绍Axios 是一个基于 promise 的 HTTP 库,可以...
    milletmi阅读 3,521评论 0 9
  • 目录:Promise 的含义基本用法Promise.prototype.then()Promise.prototy...
    BluesCurry阅读 1,499评论 0 8
  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,729评论 1 56
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 8,698评论 0 29
  • Axios是一个基于Promise的HTTP请求库,可以用在浏览器和Node.js中。平时在Vue项目中,经常使用...
    多啦斯基周阅读 885评论 0 0