国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue+axios+promise實際開發用法

羅志環 / 2915人閱讀

摘要:都是的實例對象,要變成狀態需要,,狀態都是,如果至少有一個狀態是,就會變成狀態用法只要之中有一個實例率先改變狀態,的狀態就跟著改變。這一點與方法不一致。

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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/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元查看
<