Vue-axios的封装以及具体使用

axios描述

axios是基于promise的http库，我们可以用它来 拦截请求和响应、取消请求、转换json、客户端防御CSRF等，所以我们更推荐axios跟后台进行数据交互。

安装

npm install axios

使用

在src文件夹下新建request文件夹，在里面新建request.js跟api.js；
request.js用来封装axios，api.js用来统一管理接口。

1. 引入 axios

import axios from 'axios';
import {Toast} from 'vant';

2. 创建axios实例

/** 创建axios实例*/
const request = axios.create({})

3. 设置全局配置

/** global config */
request.defaults.baseURL = process.env.API_HOST;//设置请求路径的域名部分(可以查看我上篇文章)
request.defaults.headers.post['Content-Type'] = 'application/json';//post请求头的设置
request.defaults.timeout = 30000;//设置请求超时
request.defaults.withCredentials = true;//Send cross-domain request credentials

4. 请求拦截

/** request interceptor*/
request.interceptors.request.use(
    config => {
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

5. 响应拦截

/** response interceptor*/
request.interceptors.response.use(
    /**
     * Determine the request status by custom code
     * Here is just an example
     * You can also judge the status by HTTP Status Code
     */
    response => {
      // return response;

      if(response.data.state === 'Y' || response.data.resCode == 200){
        return response;
      }else{
        Toast({
          message: response.data.msg,
          type: 'error',
          duration: 2* 1000
        })
        return Promise.reject()
      }


    },
    error => {
				if (error && error.response) {
					switch (error.response.status) {
						case 302:
							error.message = '未授权，请重新登录'
							break;
						case 400:
							error.message = '错误请求'
							break;
						case 401:
							error.message = '授权错误，请重新登录'
							break;
						case 403:
							error.message = '登录过期，拒绝访问'
							break;
						case 404:
							error.message = '请求错误，未找到该资源'
							break;
						case 405:
							error.message = '请求方法未允许'
							break;
						case 408:
							error.message = '请求超时'
							break;
						case 500:
							error.message = '服务器出错'
							break;
						case 501:
							error.message = '网络未实现'
							break;
						case 502:
							error.message = '网络错误,服务更新中...'
							break;
						case 503:
							error.message = '服务不可用'
							break;
						case 504:
							error.message = '网络超时'
							break;
						case 505:
							error.message = 'http版本不支持该请求'
							break;
						default:
								error.message = `连接错误${error.response.status}`
							break;
					}
				}else {// 跨域获取不到状态码或者其他状态码进行的处理
					error.message = '遇到点问题'
				}
        Toast({
            message: error.message,
            type: 'error',
            duration: 2* 1000
        })
        return Promise.reject(error)
    }
)

6. 导出

export default request

以上您的axios封装已经完成啦！当然axios封装并不是唯一的，你也可以在请求拦截，响应拦截做其他处理，比如对用户登录的token进行处理等等，你还可以对get，post再封装等等，可根据自己的情况做调整。

---

然后我们来说说统一管理api。

api接口统一管理

1. 引入request.js

import request from './request'

2. 这是post请求
   我们定义一个searchCityZone方法，我们需要向后台传一个json，p就是请求接口时携带的参数对象，最后需要export导出该方法。

export function searchCityZone(p) {
  return request({
    method:'post',
    url:'xxxxx/rateScreen/queryCityZone',
    data:p
  })
}

3. 这是get请求

export function loanId(applyNo) {
  return request({
    method: 'get',
    url:'/xxxxx/direct/loan/loanId',
    params:{applyNo:applyNo}
  })
}

---

现在我们要在页面里调用api的接口

1. 引入api接口

import { searchCityZone } from "../request/api";

2. 使用
   定义一个方法，在里边调用api。

 getCityZone(){
      var cityId = Object.assign({cityId:this.cityCode})
      searchCityZone(cityId).then(res => {
        console.log(res.data.data);
      }).catch(err =>{
            reject(err.data)
        })
    }

以上就是从封装到使用的全步骤，希望可以帮助到你！