[Vue]自定义封装axios方法总结

导语：最近在用vue脚手架开发应用的过程中遇到了Ajax请求的问题，由于定制化比较明显，所以就到网上找一些自定义的方法，最后使用官方的方法成功的封装了自己需要的那种，现在就自定义的方法做一下总结。

目录

• axios是什么
• 如何使用axios
• 自定义axios

axios是什么

• axios官网

axios是基于Promise的一款http客户端工具，用于在游览器和nodejs环境中进行请求网站资源。

有以下特性：

• 为游览器生成一个http请求
• 为node生成一个http请求
• 支持Promise的API方法
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换成json数据格式
• 客户端防范XSRF

如何使用axios

• 下载使用
• cdn引入
• npm安装
• get请求
• post请求

下载/CDN使用

如果你只在游览器使用，可以下载到本地或者使用cdn。

<!-- 本地引入 -->
<script src="js/axios.min.js"></script>
<!-- cdn -->
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>

npm安装

npm install axios -S

get请求

推荐配合await这种方法使用。

async function getComments () {
	 try {
	 
		  let data = await axios.get('https://jsonplaceholder.typicode.com/comments', {
		    params: {
		      postId: 1,
		    }
		  })
		  console.log(data);
		  
	  }catch (error) {
	  
	        console.error(error);
	        this.$toast("接口出错了！")
	        
	 }
}
this.getComments();

下面是获取的内容：

post请求

async function savePosts () {
  let data = await axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'far',
    body: 'bar',
    userId: 121,
  })
  console.log(data);
}

this.savePosts();
 

下面是获取的内容：

自定义axios

有时候对于一些要求比较少的网站应用来说，是一个不错的选择，但是对于大型应用来说显得有的蹩脚，施展不开。所以就有了自定义axios请求的一种方法，按照所需自定义请求各个方面的内容。

一般有自定义请求url,是否跨域，请求头，拦截请求和响应等方法。

创建一个axios实例

let server = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com', //请求url
  timeout: 3000, //超时处理
  withCredentials: false, //是否跨域
});

拦截请求

常见的就是在请求之前加一些请求头和一些有关请求的内容。

//添加一个请求拦截器
server.interceptors.request.use(function (config) {

  //在请求发出之前进行一些操作，比如请求头携带内容
  config.headers['Content-Type'] = 'application/json, text/plain';
  
  //设置口令 token
  //config.headers.Authorization=sessionStorage.getItem('token');
  return config;
  
}, function (error) { 
  return error;
  this.$toast('请求出错啦~')
});
 

拦截响应

和拦截响应一样，也是做一些操作。

//添加一个响应拦截器
server.interceptors.response.use(function (res) {
  // 写一下操作，比如token过期处理
  if (res.data.statusCode == 401) {
    alert('暂无权限，请重新登录!');
    window.location.href = '/login';
    return false;
  }
  return res;
}, function (error) {
  switch (error && error.response && error.response.status) {
    case 400:
      error.message = '请求错误'
      break
    case 401:
      error.message = '未授权，请登录'
      break
    case 403:
      error.message = '拒绝访问'
      break
    case 404:
      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:
  }
  //Do something with response error
  return error;
}) 

自定义请求

使用自定义请求时，就可以省略域名地址了，例如：

async function getComments () {
  let data = await server.get('/comments', {
    params: {
      postId: 1,
    }
  })
  console.log(data);
}
this.getComments();

作者博客地址

原文链接，侵删：https://blog.csdn.net/fed_guanqi/article/details/96150013

也可参考：https://www.cnblogs.com/ysx215/p/11446615.html

以下为我自定义的，在 src下新建一个util文件夹

util/axios.config.js

import axios from 'axios'
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'

const instance=axios.create({
    // baseURL:'http://www.baidu.com', //基础URL,如果请求多个服务器的api，可以不用直接定义
    timeout:1000, //请求延时时间 
    headers: {'X-Requested-With': 'XMLHttpRequest'},   //自定义请求头内容
    responseType: 'json',  //请求数据类型包括  'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
    //  params: {},  //无论请求为何种类型，在params中的属性都会以key=value的格式在url中拼接
    //  proxy: {
    //    //代理
    //     host: '127.0.0.1',
    //     port: 9000,
    //     auth: {
    //       username: 'mikeymike',
    //       password: 'rapunz3l'
    //     }
    // },
})

// 自定义添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    // Message.error('参数错误')
    return Promise.reject(error);
  });

// 自定义添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

//将配置暴露出去
  export default instance;

再新建一个api.js用于管理所有的请求

util/api.js

import request from '../util/axios.config'
//如果请求多个服务器的api，可以这样定义
const baseURL1='http://www.baidu.com';
const baseURL2='http://www.baidu.com';

// 获取疫情地图参数
export function GetMapOption(){
    return request({
        url:'../assets/optionMap.json',
        method:'get'  
    })
} 
// 登录
export function Login(params){
    return request({
        url:baseURL1+'admin/login',
        method:'post',
        data:params
    })
}

// 修改信息
export function UpdateInfo(params){
    return request({
        url:baseURL2+'admin/user/UpdatePsw',
        method:'post',
        data:params
    }) 
}

在组件中使用

import {Login} from '../util/api'

var param={
 	userName: this.LoginName, 
 	psw: this.Password
} 

Login(JSON.stringify(param)).then(res=>{
  //console.log(res)
  if(res.status=='200'){
    this.$message.success('登录成功~'); 
    this.$router.push({path:'/main'})
  }else if(res.status=='500'){
      this.$message.error(res.data.msg);
  } 
})
.catch(error=>{
  console.log(error);
  this.$message.error('网络出错了~请稍后重试')
})

参考链接：

Vue中Axios的封装和API接口的管理

Axios