Introduction to how to simply configure axios with vue.js

This article mainly introduces the method of simply configuring axios in vue.js. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

axios is a Promise-based application. For browsers and nodejs HTTP clients, the following article mainly introduces you to the relevant information about the simple configuration of axios with vue.js. Friends who need it can refer to it. Friends who need it can come and learn together.

Preface

Officially no longer recommends using resource. We can’t lag behind if we switch to axios. At least you have to know. Come on, you can brag to the interviewer during the interview and don't talk too much nonsense.

It itself has the following characteristics:

• Create XMLHttpRequest from the browser

• Issue an http request from node.js

• Support Promise API

• Interception of requests and responses

• Convert request and response data

• Cancel request

• Automatically convert JSON data

• Client Support preventing CSRF/XSRF

Configuration method

First install with npm

npm install --save axios vue-axios

After installation, configure it in your main.js file and add these two sentences

import axios from 'axios'
Vue.prototype.$http = axios

Then when you read the interface data, you can write it directly like this. This is the same as resource. The op, uin and so on below are the parameters to be passed.

this.$http.post(localStorage.getItem("addUrl")+'/skynet_sync/btsp', {
       "op": "update_card_num",
       "uin": uin,
       "protypeId": index,   
       "cardNumber": parseInt(v)
      })
      .then(response=> {
      //如果接口走成功就执行这里
      }).catch(function (error) {
      //接口失败，也就是state不是200的时候，走这里
      });

Okay, done!

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use Vue.js instructions to implement the select-all function

About the usage analysis of vue routing

The above is the detailed content of Introduction to how to simply configure axios with vue.js. For more information, please follow other related articles on the PHP Chinese website!