资讯专栏INFORMATION COLUMN

vue+axios+promise实际开发用法

罗志环 / 2852人阅读

摘要:都是的实例对象,要变成状态需要,,状态都是,如果至少有一个状态是,就会变成状态用法只要之中有一个实例率先改变状态,的状态就跟着改变。这一点与方法不一致。

axios它是基于promise的http库,可运行在浏览器端和node.js中,然后作者尤雨溪也是果断放弃了对其官方库vue-resource的维护,直接推荐axios库,小编我也是从vue-resource转换过来的,差别说不来,我们讲一下axios在实际开发中的用法
axios特点

1.从浏览器中创建 XMLHttpRequests
2.从 node.js 创建 http 请求
3.支持 Promise API
4.拦截请求和响应 (就是有interceptor)
5.转换请求数据和响应数据
6.取消请求
7.自动转换 JSON 数据
8.客户端支持防御 XSRF

安装axios和qs
npm i axios --save
npm i qs--save
创建项公共模块API

我是用vue-cli创建的项目在src->util->api.js(公共请求模块js)

引入axios和qs

import axios from "axios"

有时候向后端发送数据,后端无法接收,考虑使用qs模块

import qs from "qs"

判定开发模式

if (process.env.NODE_ENV == "development") {    

    axios.defaults.baseURL = "/api";

}else if (process.env.NODE_ENV == "debug") {    

    axios.defaults.baseURL = "http://v.juhe.cn";

}else if (process.env.NODE_ENV == "production") {    

    axios.defaults.baseURL = "http://v.juhe.cn";

}

全局设置头部信息

axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";

全局设置超时时间

axios.defaults.timeout = 10000;

请求路由拦截

在请求发出去之前,可以做一些判断,看是否是合法用户

axios.interceptors.request.use(function (config) {
    // 一般在这个位置判断token是否存在
    return config;
   }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

响应拦截

axios.interceptors.response.use(function (response){
     // 处理响应数据
    if (response.status === 200) {            
        return Promise.resolve(response);        
    } else {            
        return Promise.reject(response);        
    }
    }, function (error){
    // 处理响应失败
    return Promise.reject(error);
});
封装请求方法

使用ES6模块化export导出import导入

在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工具,现在ES6自带了模块化,不过现代浏览器对模块(module)支持程度不同, 需要使用babelJS, 或者Traceur把ES6代码转化为兼容ES5版本的js代码;

get请求

export function get(url, params){    
    return new Promise((resolve, reject) =>{        
        axios.get(url, {            
            params: params        
        }).then(res => {
            resolve(res.data);
        }).catch(err =>{
            reject(err.data)        
        })    
    });
}

post请求

export function post(url, params) {
    return new Promise((resolve, reject) => {
         axios.post(url, qs.stringify(params))
        .then(res => {
            resolve(res.data);
        })
        .catch(err =>{
            reject(err.data)
        })
    });
}
实际使用

在main.js中引入js

import {get,post} from "./utils/api"
//将方法挂载到Vue原型上
Vue.prototype.get = get;
Vue.prototype.post = post;

配置请求环境
这里通过devServer请求代理
当在请求过程中有/api字符串会自动转换为目标服务器地址(target)

devServer: {
   historyApiFallback: true,
   hot: true,
   inline: true,
   stats: { colors: true },
   proxy: {
     //匹配代理的url
     "/api": {
          // 目标服务器地址
             target: "http://v.juhe.cn",
             //路径重写
             pathRewrite: {"^/api" : ""},
             changeOrigin: true,
             secure: false,
           }
      },
    disableHostCheck:true
   }

这是请求聚合数据的接口为列子

this.get("/toutiao/index?type=top&key=秘钥",{})
    .then((res)=>{
        if(res.error_code===0){
            resolve(res);
        }else{
            //这里抛出的异常被下面的catch所捕获
            reject(error);
        }
    })
    .catch((err)=>{
        console.log(err)
    })

返回数据

使用promise
1.比如用户想请求url1接口完后再调url2接口

    var promise = new Promise((resolve,reject)=>{
        let url1 = "/toutiao/index?type=top&key=秘钥"
        this.get(url,{})
        .then((res)=>{
            resolve(res);
        })
        .catch((err)=>{
            console.log(err)
        })
    });
    promise.then((res)=>{
        let url2 = "/toutiao/index?type=top&key=秘钥"
        this.get(ur2,{})
        .then((res)=>{
            //只有当url1请求到数据后才会调用url2,否则等待
            resolve(res);
        })
        .catch((err)=>{
            console.log(err)
        })
    })

Promise对象

Promise有三种状态
pending: 等待中,或者进行中,表示还没有得到结果
resolved: 已经完成,表示得到了我们想要的结果,可以继续往下执行
rejected: 也表示得到结果,但是由于结果并非我们所愿,因此拒绝执(用catch捕获异常)

这三种状态不受外界影响,而且状态只能从pending改变为resolved或者rejected,并且不可逆(顾名思义承诺的后的东西怎么又能返回呢)。在Promise对象的构造函数中,将一个函数作为第一个参数。而这个函数,就是用来处理Promise的状态变化

这里要注意,不管是then或者catch返回的都是一个新的Promise实例!而每个Primise实例都有最原始的Pending(进行中)到Resolve(已完成),或者Pending(进行中)到Reject(已失败)的过程

Promise基本用法

Promise.all()用法

var p = Promise.all([p1, p2, p3]);

all()接受数组作为参数。p1,p2,p3都是Promise的实例对象,p要变成Resolved状态需要p1,p2,p3状态都是Resolved,如果p1,p2,p3至少有一个状态是Rejected,p就会变成Rejected状态

Promise.race()用法

var p = new Promise( [p1,p2,p3] )

只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数,p的状态就会改变Resolved状态

Promise resolve()用法

Promise.resolve("foo")
// 等价于
new Promise(resolve => resolve("foo"))

有时需要将现有对象转为Promise对象,Promise.resolve方法就起到这个作用.

Promise reject()用法

Promise.reject("foo")
// 等价于
new Promise(reject => reject("foo"))

Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected。但是Promise.reject()方法的参数,会原封不动地作为reject的理由,变成后续方法的参数。这一点与Promise.resolve方法不一致。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98357.html

相关文章

  • vue axios 简单封装以及思考

    摘要:先安装的详细介绍以及用法就不多说了请移步下面是简单的封装一个,在此说明这个方法呢是不一定需要的,根据个人的项目需求吧,也可以直接返回,交给后面另行处理也行。或者根据后端返回的状态,在里面进行处理也行。先安装 axios npm install axios axios的详细介绍以及用法 就不多说了请 移步 github ➡️  https://github.com/axios/axios ...

    phoenixsky 评论0 收藏0
  • Vue中如何使用axios请求拦截

    摘要:很多初学者就会放弃使用拦截器,毕竟拦截器是可以不使用的,但是使用拦截器,会在页面中减少很多不必要的代码。三不使用请求拦截如果不使用请求拦截,也是可以的,但是会多了非常多的代码,我们以登录页为例。 一、前言 axios的基础使用就不过多的讲解啦,如何使用可以看axios文档使用说明·Axios中文说明 在这里和大家分享一下axios拦截在实际项目中的使用 很多人都看过axios的官方文...

    _Dreams 评论0 收藏0
  • 后端开发者的Vue学习之路(五)

    摘要:由服务器提供的响应来自服务器响应的状态码来自服务器响应的状态信息服务器响应的头是为请求提供的配置信息所以请求返回后,我们可以通过来获取响应情况。拦截器拦截器拦截器用于拦截发起的请求或用于拦截返回的响应。目录 上节内容回顾 使用第三方组件库 如何发起请求 请求错误处理 请求带参 ...

    jay_tian 评论0 收藏0
  • vue-cli中怎么基于axios去封装方法

    摘要:大家好,我是,潜水于掘金和思否的一名前端小小生,今天看了几篇文章关于中怎么去封装,视乎好多版本都是基于去做的。 **大家好,我是minijie,潜水于掘金和思否的一名前端小小生,今天看了几篇文章关于vue中怎么去封装axios,视乎好多版本都是基于promise去做的。这让我很疑惑,axios不就是基于promise的一个请求库吗?为啥还要多一层promise呢?下面是根据我自己的想法...

    baiy 评论0 收藏0
  • 从0到1使用VUE-CLI3开发实战(四): Axios封装

    摘要:从到使用开发实战四封装有很多同学看了本系列的前几篇之后建议我暂时先不用,于是小肆之后将把换成继续下面的文章。前置阅读用从到做一个完整功能手机站一从到开发实战手机站二提交规范配置从到使用开发实战三知识储备 从0到1使用VUE-CLI3开发实战(四): Axios封装 有很多同学看了本系列的前几篇之后建议我暂时先不用TS,于是小肆之后将把TS换成JS继续下面的文章。今天给大家带来项目中非常...

    ThinkSNS 评论0 收藏0

发表评论

0条评论

罗志环

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<