Vue implementation request server-side API interface example

This example describes the request server-side API interface implemented by VUE. Share to everyone for reference, specifically:

  Import Axios from 'Axios'Import Router from'@/router'axios.defaults.timeout = 3000axios.defaults.baseURL = '' axios.interceptors.Request.Use (config => {// const token = getcookie ('name "config.data = config.data config.headers = {' content-type ':' Application / JSON; Charset = UTF-8 '} if (config.ur ===' / API / login / index ') {} else {g (LocalStorage.Getitem (' authorization ')) {config.headers.authorizatior = localStorage.GetItem (' Authorization ')}} // if (token) {// config.params = {' token ': token} //} returnif}, error => {return.com, {}) AXIOS.ISTERCEPTORS.RESPONSE .use (response => {// returns an error jump to the homeness (response.data.code === 0) {router.push({path: '/', querry: {redirect: router.currentroute.ffullpath}}}}}}}} Return Response} .removeitem ('Authorization') Router.push ('/ login')}} Return Promise.reject (ERROR)} / ** * Package Get method * @Param Url * @Param Data * @returns {promise} * / Export Function Fetch (URL, Params = {}) {Return New Promise ((Resolve, Reject) => {AXIOS.GET (URL, {Params: params}) .then (response => {resolve (response.data)} ) .catch (err => {reject (err)})}} / ** * Package POST request * @Param url * @Param data * @returns {promise} * / export function post (URL, DATA = {} ) {return new promise => {AXIOS.POST (URL, DATA) .THEN (RESPONSE => {resolve (response.data)}, err => {reject (err)})}} / ** * Package PATCH request * @Param url * @Param data * @returns {promise} * / export function Patch (URL, DATA = {}) {Return New Promise ((resolve, reject) => {AXIOS.PATCH (URL, DATA) .Then (response => {resolve (response.data)}, err => {REJECT (Err)})}} / ** * Package PUT request * @Param url * @Param Data * @returns {promise} * / export function Put (URL, DATA = {}) {Return New Promise (Resolve, REJECT) => {AXIOS.PUT (URL, DATA) .Then (response => {resolve (response.data)}, err => {reject (err)})}}  
main.js call

 Import {fetch, post, patch, put} from'@/UTIL/Fetch'Vue.Prototype.get = fetchvue .prototype.post = postvue.pRototype.patch = patchvue.Prototype.put = Put ​​  View page Using 

Export Default {name: ‘ Login ‘, DATA () {Return {Mobile:’, Password: ”}}, Components: {xinput, xbutton, group, box}, methods: {handlelogin () {let params = {} params.username = THIS .mobile params.password = this.password this.post (‘/ api / driver / index’, params) .Then ((data) => {console.log (data)}). Catch ((error) => { Console.log (Error)}}}}
It is also desirable to help everyone Vue.js program this article.
                     
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment