美文网首页vue
手写promise二次封装axios

手写promise二次封装axios

作者: 劉䔳Fairy | 来源:发表于2019-08-01 15:56 被阅读227次

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;
    });
  }
}

相关文章

  • 前端常见面试题(十八)@郝晨光

    手写promise封装axios 其实,axios本身就是基于Promise进行封装的,我们之所以进行二次封装,主...

  • 手写promise二次封装axios

    axios 是什么??axios是基于promise(诺言)用于浏览器和node.js是http客户端。作用??a...

  • 基于axios的二次封装

    1、 axios的二次封装思路 axios是一个基于 promise 的 HTTP 库(同时支持浏览器端和Node...

  • async await

    await等待的是Promise的 resolve和reject(axios能用实际上axios封装的是Promise)

  • 前端常见面试题二十一

    目录:1、手写promise封装axios2、如何解决回调地狱3、请详解移动端点透发生场景、原因及解决方案(最优)...

  • 第二十一天web前端面试题

    1,手写promise封装axios 2,如何解决回调地狱 首先回调地狱是什么?函数作为参数层层嵌套 什么是回调函...

  • 前端手写

    节流 防抖 用xhr手写axios 函数柯里化 手写promise 手写reduce new 深拷贝 string...

  • 面试题21

    1.手写promise封装axios 2.如何解决回调地狱 3.请详解移动端点透发生场景、原因及解决方案(最优) ...

  • IE浏览器error:Promise未定义

    原因: 使用axios会报错,因为axios本质上是封装了ES6语法的promise,而promise在ie上并不...

  • axios服务端进行交互

    正常的axios使用如下: 项目中:进行二次封装,错误的统一处理 注意: 请求失败,返回Promise.rejec...

网友评论

    本文标题:手写promise二次封装axios

    本文链接:https://www.haomeiwen.com/subject/uoshrctx.html