Shulou(Shulou.com)06/03 Report--

Vuejs calls the method in the js file. In view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

Vuejs calls the methods in the js file: 1, create a new js file under the assets file; 2, reference it in the components that need to use the method through "export default {.}".

This article operating environment: Windows7 system, Vue2.9.6 version, DELL G3 computer

How does vuejs call the methods in the js file?

The method of referencing js File in vue

In many components of vue will be used axios to Post data, each component can be written on a post method, copy on the line, but always feel some inconvenience, then you can write the post of axios into a separate js file, and then reference in the required components is not better.

1. Create a new js file under the assets file

Create a new file named webpost.js

Encapsulation of import axios from 'axios' / / Post method function axiosPost (url,params) {return new Promise ((resolve, reject) = > {axios ({url: url, method:' post', data: params) Headers: {'Content-Type':'application/json'}}) .then (res= > {resolve (res.data) });})} export {axiosPost}

This needs to specifically refer to axios, that is, the first line, and then you can use it. The last sentence is very important, otherwise you cannot call it in other components.

2. Reference in components that need to use this method

Import {axiosPost} from'.. / assets/webpost';export default {}

Note the path of the reference. The content in import {} is the content in export above.

You don't even need this when you use it, just axiosPost it.

AxiosPost (url,params) .then (res= > {if (res===401) {this.$message.error ('Oh, sorry, the user name or password you entered is wrong!') ;} else {}

3. Another way to write js

The following is the re-edited part, which has sorted out the axios part again these days, and added an interceptor to bring token verification to the api request. With only one more export, you can write more than one, and the structure is clearer and easier to understand.

Encapsulation of the import axios from 'axios' / / Post method export function axiosPost (url,params) {return new Promise ((resolve) Reject) = > {/ / the following section is the interceptor function axios.interceptors.request.use (config= > {const token=localStorage.getItem ('token') if (token) {config.headers.authorization=token} return config}) Err= > {}) / / here is the normal axios ({url: url, method: 'post', data: params Headers: {'Content-Type':'application/json'}}) .then (res= > {resolve (res.data) });})

The answer to the question about how vuejs calls the method in the js file is shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

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.