Shulou(Shulou.com)05/31 Report--

This article Xiaobian describes in detail for you "how to encapsulate axios plug-ins and interfaces in vue", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to encapsulate axios plug-ins and interfaces in vue" can help you solve your doubts.

I. installation and configuration

1. Open the terminal installation under the root of the project

Npm install axios-S

two。 After the installation is complete, create a utils directory under the src directory to store all the tools and plug-ins used (personal habits)

3. Create a request.js file in the utils directory to configure axios, as follows:

Import axios from 'axios' / / introduce axiosconst service = axios.create (the baseUrl of {/ / api is the same address before each request. In this place, because I have configured the environment, I directly take the configuration baseURL: process.env.BASE_URL, timeout: 5000 / / request timeout}) / / request interceptor service.interceptors.request.use (config = > {/ / here is the setting for each request, for example, each request carries a token. Or when requesting for post, introduce the qs formatting parameter. Return config}, error = > {console.log ('request failed:' + error) Promise.reject (error)}) / response interceptor service.interceptors.response.use (response = > {const res = response.data / / the code of this place agrees with the backend (you can set the information you want to prompt according to the status code) if (res._code! = = '10000') {/ / you can add several common settings here You can then set return Promise.reject (res)} else {return response.data}}, error = > {console.log ('response failure:' + error) return Promise.reject (error)}) export default service in the page separately

2. Use

1. Create an api folder under the src directory. The api folder has the same directory structure as the page folder, and preferably the same semantic name (personal habits, easy to manage)

two。 For example, if there is a manage directory and a user.vue page in my page structure, then the same api directory should also have a manage directory with a user.js file in it.

The 3.user.js code is as follows:

/ / introduce the configured axiosimport request from'@ / utils/request'// to get the user list export const getUserList = params = > {return request ({url: 'your interface address', method: 'get', params})} / / add users export const addUser = data = > {return request ({url:' your interface address', method: 'post', data})} / / delete the user export const delUser = data = > {return request ({url:' your interface address' Method: 'post', data})} / / modify user information export const addUserInfo = data = > {return request ({url:' your interface address', method: 'post', data})} / / query user details export const getUserDetail = params = > {return request ({url:' your interface address', method: 'get', params})}

The 4.user.vue code is as follows:

Import userApi from'@ / api/manage/user'export default {name: "User", data () {return {}}, created () {/ / need not pass parameter userApi.getUserList () .then (res = > {/ / successful callback}) .catch (err = > {/ / failed callback}) / / need to pass parameter let userInfo = {name: 'Zhang San' Age: 18} userApi.addUser (userInfo) .then (res = > {/ / successful callback}) .catch (err = > {/ / failed callback})}}

Common status codes are attached:

Const status = error.response.status;let msg = ""; switch (status) {case: msg = "incorrect request" break; case 401: msg = "unauthorized, please log in again" break; case 403: msg = "deny access" break; case 404: msg = "interface address not found" break; case 405: msg = "request not allowed" break Case 408: msg = "request timeout" break; case: msg = "server error" break; case: msg = "Network not implemented" break; case 502: msg = "Network error" break; case 503: msg = "Service unavailable" break; case: msg = "Network timeout" break; case 505: msg = "http version does not support" break Default: msg = "connection error" break;} here, this article "how to encapsulate axios plug-ins and interfaces in vue" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.