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

This article mainly explains "the configuration method of Vue3 using axios", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to configure Vue3 using axios".

1. Install axiosnpm install axios-save 2. Configure axios and add interceptor

Create a new request folder under the src directory, and create a new index.ts (or .js) file in it. Edit the code as follows:

Import axios from 'axios'// creates an axios instance const service = axios.create ({baseURL:' / api', / / all request address prefixes timeout: 60000, / / request timeout millisecond withCredentials: true / / Asynchronous request carries cookie headers: {/ / set the parameter passing type needed by the backend: 'Content-Type':' application/json', 'token':' your token', 'Xmuri RequestedMuffi Withcare:' XMLHttpRequest',} }) / / add request interceptor service.interceptors.request.use (function (config) {/ / what to do before sending the request return config} Function (error) {/ / what do you do to request errors console.log (error) return Promise.reject (error)}) / / add response interceptor service.interceptors.response.use (function (response) {console.log (response) / / 2xx range The function is triggered by the status code in the. / / do something to the response data / / dataAxios is the data const dataAxios = response.data / / the status code in the returned data of axios is const code = dataAxios.reset return dataAxios} agreed with the backend This function is triggered by function (error) {/ / status codes that are out of the 2xx range. / / do something to the response error console.log (error) return Promise.reject (error)}) export default service 3. Use axios to send the request

Create a new apis folder under the src directory, and put all the future request files in it, such as creating an API user.ts to request user information, as follows:

/ / Import the parameter interface UserInfoParam {userID: string, userName: string} / / get the user information export function apiGetUserInfo (param: UserInfoParam) {return httpRequest ({url: 'your api url', method:' post', data: param,}) of the axios instance's interface UserInfoParam'@ / request/index'// definition API.

Then use this request in the specific business page, for example:

Import {onMounted} from 'vue'import {apiGetUserInfo} from' @ / apis/user'function getUserInfo () {const param = {userID: '10001mm, userName:' Mike',} apiGetUserInfo (param). Then ((res) = > {console.log (res)})} onMounted (() = > {getUserInfo ()}) attachment: global introduction of axios into Vue3

In main.js

Import axios from 'axios'const app = createApp (App) / / overwrite the default to this app.provide (' $axios', axios)

Using axios (compositionAPI) within a component

Import {inject} from 'vue' const $axios = inject (' $axios') $axios.get ('https://api.github.com/users').then((resp) = > {console.log (resp.data)}). Catch ((err) = > {console.log (err)}) so far, I believe you have a deeper understanding of "Vue3 uses axios configuration method", you might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.