Vue2.0 + vux Case: Econan, introduction of Axios

Reprint Please specify source: http://www.cnblogs.com/shamoyuu/p/vue_vux_app_5.html

Project GitHub Address:Https://github.com/shamoyuu/vue-vux-iconan

We introduced Vux's toast plugin, in order to be able to use toasts anywhere (not just in components, such as store.js), we modified Main.js

Import Vue from "Vue"Import App from "./app"Import Router from "./tools/router"Import Store from "./tools/store"Import {Toastplugin} from "Vux"Import testdirective from "./directives/common/testdirective"Import API from "./tools/api"Import Errorhandle from ".//tools/errorhandle"Vue.config.productionTip=false;ConstFastclick = require ("Fastclick"); Fastclick.attach (document.body); Vue.use (Toastplugin, {type: "text", Position: ' Bottom ', Width: "70VW" }); Vue.use (testdirective); Vue.use (API); Vue.use (Errorhandle); Vue.prototype.instance = NewVue ({el:". App", Router:router, Store:store, Template:"<App/>", components: {APP}});

The change is in the red part of the picture, and the last sentence is important so that we can refer to the instance of Vue anywhere, so that toast is used everywhere.

As long as you can get to the Vue object, you can pop the toast in the following way

Vue.prototype.instance. $vux. Toast.show ("message")

Then we add Axios

NPM Install--save-dev Axios

Then we create a new file Tools/axios.js file

Import Axios from "Axios"Import Vue from"Vue"//setting global requests for AJAX requestsAxios.interceptors.request.use (config) ={config.headers["X-requested-with"] = "XMLHttpRequest"; returnconfig;});//Error HandlingAxios.interceptors.response.use ((response)={Const result=Response.data;
        //statecode is 0 for normal return data, other cases indicate error, error message provided by message        Switch(result.statecode) { Case0:                returnResult.data;  Case1:                //not logged in                 Break;  Case2:                //Other Errors                 Break; default:                 Break; } Const ERR=NewError (result.message); Err.data=result; Err.response=response; Throwerr; }, (Err)= {        if(Err &&err.response) {Switch(err.response.status) { Case400: Err.message= "Request Error";  Break                 Case404: Err.message= "Request address does not exist";  Break                 Case408: Err.message= "Network exception, please retry later [408]";  Break                 Case500: Err.message= "Network exception, please retry later [500]";  Break                 Case501: Err.message= "Network exception, please retry later [501]";  Break                 Case502: Err.message= "Network exception, please retry later [502]";  Break                 Case503: Err.message= "Network exception, please retry later [503]";  Break                 Case504: Err.message= "Network exception, please retry later [504]";  Break                 Case505: Err.message= "Network exception, please retry later [505]";  Break                default:            }        } Else{err.message= "Network exception, please retry later";        } Vue.prototype.instance. $vux. Toast.show (Err.message); returnPromise.reject (ERR); }); exportdefaultAxios

The content of this file is very simple, the only thing to note is to intercept the part of the response request, we agreed to use the following format

{    "statecode": 0,    "data": "When Statecode is 0 o'clock valid, indicates the data returned normally"    "message": "When Statecode is not valid for 0 o'clock, Represents the error message "}

So in the statecode==0, we directly returned to the Result.data, the other information is discarded directly, because the page does not need to care.

If the data (200 status) is returned normally, it is up to the page to eject the message message, while other non-200 exceptions will default to the toast prompt.

Then we create a new error-handling file Tools/errorhandle.js

Exportdefault{Install (Vue) {vue.prototype. $errorHandle=function(errordata) {//If 200 is returned, the message pops up            if(errordata.response && errorData.response.status = = 200) {                if(Errordata.data &&errorData.data.message) {Vue.prototype.instance. $vux. Toast.show (ErrorData.data.message); }            }            Else {                //if it is non-200, other errors are handled here            }        }    }}

Then we create a new tools/api.js file, wrap the Axios again, and let it become a global object.

Import Axios from "@/tools/axios"default  {    Install (Vue) {        = {            get (URL, params) {                return  axios.get (URL, {                    params:params                })            },            post (URL, params) {                return  axios.post (URL, params);     }}}}

At this point, we have successfully introduced Axios, to write an example, add the following code to any component

function () {
    this. $api. Get ("Http://xxx.xx.com/xxxx/getlist", {        "1"    })    . Then ( function (data) {        Console.info ("Success", arguments);    })    . Catch (this. $errorHandle);}

The handling of the error here does not go to the second parameter of then, but instead writes the catch separately, which is a bit clearer.

If you do not write this catch, there is no hint to the error of State 200 and Statecode! = 0 (In some cases it may not be necessary to prompt).

This is the error message for status 404, which will pop up regardless of write or write catch.

This is the error hint for state 200, but statecode! = 0 o'clock, which must be written. catch (this. $errorHandle) is triggered.

Vue2.0 + vux Case: Econan, introduction of Axios