Basic introduction to axios packaging in vue (with code)-JS Tutorial-php.cn

Basic introduction to axios packaging in vue (with code)

不言

Release： 2018-08-14 15:41:31

Original

3358 people have browsed it

This article brings you a basic introduction to axios packaging in Vue (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Axios is a promise-based HTTP library that can be used in browsers and node.js. Using axios in a vue project is a very wise choice, because vue officials have announced that they will no longer maintain vue-resource, and recommend the use of axios.

1 Why choose axios?

Use axios to perform unified request-response interception. For example, when responding, we intercept the response information, determine the status code, and pop up the error message
Set the request timeout, for example, stop the request if there is no response after 3000ms
Based on promise, you can easily use then or catch to process the request
Automatically convert json data

#2 How to use?

You can use the following methods

1. npm install axios --save
2. bower install axios --save
3. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Copy after login

3 to encapsulate http requests
The example given by the official website:

axios.get('/user?ID=12345')
  .then(function(response){
    console.log(response);
  })
  .catch(function(err){
    console.log(err);
  });

Copy after login

On this basis we should encapsulate post get in http again For the put delete method, you only need to call the interface function and pass in params on the specific page. We should encapsulate the rest such as url, header and so on.
For example, use a function in index.vue to obtain the corresponding user information through id, and return the result in the result of the then method

API.getUserInfo({id:'01'}).then((result)=>{})

Copy after login

4 Implementation idea
Create a new file, Construct an axios object instance such as axios.js

import axios from 'axios';
import router from '../router';
// 创建axios实例
const service = axios.create({            
  timeout: 30000 // 请求超时时间                                   
})
// 添加request拦截器 
service.interceptors.request.use(config => {         
  return config
}, error => {
  Promise.reject(error)
})
// 添加respone拦截器
service.interceptors.response.use(                  
  response => {
    let res={}; 
    res.status=response.status
    res.data=response.data;
    return res;
  },
  error => {
    if(error.response && error.response.status == 404){
     router.push('/blank.vue')
    }
   
        
    return Promise.reject(error.response)
  }
)

export function get(url, params = {}) {
  params.t = new Date().getTime(); //get方法加一个时间参数,解决ie下可能缓存问题.
  return service({
    url: url,
    method: 'get',
    headers: {     
    },
    params
  })
}


//封装post请求
export function post(url, data = {}) { 
  //默认配置 
  let sendObject={
    url: url,
    method: 'post',
    headers: {
      'Content-Type':'application/json;charset=UTF-8'       
    },
    data:data
  };
  sendObject.data=JSON.stringify(data);
  return service(sendObject)
}

//封装put方法 (resfulAPI常用)
export function put(url,data = {}){
  return service({
    url: url,
    method: 'put',
    headers: {
      'Content-Type':'application/json;charset=UTF-8'       
    },
    data:JSON.stringify(data)
  }) 
}
//删除方法(resfulAPI常用)
export function deletes(url){
  return service({
    url: url,
    method: 'delete',
    headers: {}
  }) 
}

//不要忘记export
export {
  service
}

Copy after login

The above code mainly implements a basic axios encapsulation, and obtains the response object when the request is successful. We mainly need to obtain several useful information, such as status code, data That's it, handle errors at the same time, for example, return 404 and we jump to a new interface

Encapsulation interface function
Create a new file, such as api.js

import {get, post,deletes,put} from './axios.js' ;//导入axios实例文件中方法
let bsae_api = process.env.BASE_API ? './'+process.env.BASE_API :'..' //获取项目api请求地址
//根据id获取用户信息
export const getUserInfoById=(id)=>{
    return get(`${bsae_api}/web/user/${id}`); //resfulapi风格
}

Copy after login

For specific pages, use index.vue

import API from '@/utils/api'
getUserInfo(){
  API.getUserInfoById('01).then((result)=>{
   }).catch((error)=>{
 })
}

Copy after login

The above is some basic introduction to axios packaging

Related recommendations:

vue uses axios and packaging

axios encapsulation fetch call details

The above is the detailed content of Basic introduction to axios packaging in vue (with code). For more information, please follow other related articles on the PHP Chinese website!