vue+axios+promise实际开发用法

简介: vue+axios+promise实际开发用法
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)
    })


返回数据

image.png

使用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方法不一致。


相关文章
|
1月前
|
JavaScript
vue封装axios(用interceptors封装)
vue封装axios(用interceptors封装)
21 0
|
1月前
|
JSON 前端开发 JavaScript
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
199 0
|
13天前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
20 2
|
23天前
|
前端开发 JavaScript
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
|
1月前
|
缓存 JavaScript UED
vue中keep-alive的用法和含义
Vue.js 的 `<keep-alive>` 组件用于缓存不活动的组件实例,避免销毁并优化性能。当组件切换时,状态得以保持。用法是将其作为包裹组件,包含需缓存的组件。例如,在切换 `ComponentA` 和 `ComponentB` 时,利用 `<keep-alive>` 可以在状态间切换而不会丢失信息。此外,结合 `<router-view>` 可缓存路由组件,`include` 和 `exclude` 属性则能指定缓存特定组件,提升应用性能和用户体验。
18 1
|
1月前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。
|
1月前
|
JavaScript 前端开发
Vue中JSX的基本用法
Vue中JSX的基本用法
23 1
|
1月前
|
JSON 前端开发 JavaScript
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
54 0
|
1月前
vue3 watch 监听多值以及深度监听用法
vue3 watch 监听多值以及深度监听用法
92 0
|
1月前
|
JavaScript
Vue Steps步骤组件用法
Vue Steps步骤组件用法
52 0