Vue:axios request encapsulation and set Default domain name prefix (for Vue 2.0)

1. Achieving results

Initiate a request to http://192.168.32.12:8080/users, fetch data, and process it in a Get method

this. Apiget ('/users', {})  = {    console.log (res)  = = {    console.log (err)  })

2. Implementation of step one of the configuration domain name prefix

2.1 Installing Axios

CNPM Install Axios--save

2.2 Configuring the Webpack.base.conf.js file

Introduced

const Webpack = require ('webpack')

The Webpack.base.conf.js file can be found in build under the project root directory, with the following two actions for the contents of the file:

Inserting code before Module.exports

// define the different HOST between development and production environment var Dev_host = json.stringify ('http://192.168.32.12:8080')var pub_ HOST = json.stringify ('http://{deploy server IP and port}')

Add Plutins options in Module.exports that are parallel to entry, output, resolve, and so on

plugins: [  new  webpack. Defineplugin ({    'production' ?  Pub_host:dev_host  })

2.3 Configuring the Main.js file

 from ' Axios '  = = = Const NEW = Bus

3. Implement step two of the package Axios

3.1 Create a new http.js file, static below the new JS folder

ConstApimethods ={methods: {apiget (URL, data) {return NewPromise (Resolve, reject) ={Axios.Get(URL, data). Then ((response) ={Resolve (Response.data)}, (response)={Reject (response) Console.log (response) bus. $message ({ Message:'Request timed out, please check the network', type:'Warning'})})} , Apipost (URL, data) {return NewPromise (Resolve, reject) ={axios.post (URL, data, {headers): {'Content-type':'Application/json'}}). Then ((response)={Resolve (Response.data)}).Catch((response) ={Console.log ('F', Response) Resolve (response) bus. $message ({message: 
    'Request timed out, please check the network', type:'Warning'})})} }}exportdefaultApimethods

3.2 File Introduction

Introducing Http.js in Request files that need to send Ajax

 from ' .. /.. /.. /.. /static/js/http.js'

and add an option at the end of the file's export default

Mixins: [HTTP]

3.3 Method Invocation

 This. Apiget ('/index.php/api/v1/goods/list', {                    params: {property_name:'seconds to kill'}}). Then (RES)= {                    if(Res.code = =0){                         This. hotlistdate =Res.result; }Else{                         This. $message. Error (Res.message); }}, (Err)={Console.log (ERR)});

Post

 This. Apipost ('/index.php/api/v1/user/login', {mobile: This. Form.phone, Password: This. Form.password}) . Then (RES)= {                    if(Res.code = =0){                                           }Else{                         This. $message. Error (Res.message); }}, (Err)={Console.log (ERR)});

Vue:axios request encapsulation and set Default domain name prefix (for Vue 2.0)