Vue全家桶（二）：Vue中的axios异步通信

CaRuJan

已于 2023-07-24 15:06:02 修改

阅读量1.3k

点赞数 4

分类专栏： Vue3 文章标签： vue.js 前端 javascript

于 2023-06-16 13:14:35 首次发布

本文链接：https://blog.csdn.net/qq_33290233/article/details/131231917

版权

Vue3 专栏收录该内容

17 篇文章 4 订阅

订阅专栏

1. Axios

1.1 Axios介绍

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信，其功能特点如下：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API [JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF（跨站请求伪造）
GitHub：https://github.com/axios/axios
中文文档：http://www.axios-js.com/

使用axios需要下载库
npm install axios --S

联系阅读：前端跨域

1.2 为什么使用Axios

1.axios：

从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口（重要，方便了很多的操作）

2.jQuery ajax：

本身是针对MVC的编程,不符合现在前端MVVM
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

1.3 Axios API

axios.request(config)
axios.get(url [，config])
axios.delete（url [，config])
axios.head(url [，config])
axios.post(url [，data [，config]])
axios.put(url [，data [，config]])
axios.patch(url [，data [，config]])

1.3 Vue使用axios向服务器请求数据

<template>
  <div class="footer">
    <ul>
      <li v-for="(item,index) in links" :key="index">
        <a href="item.url">{{item.name}}</a>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "MyFooter",
  data() {
    return {
      links: []
    }
  },
  mounted() {
    axios.get('http://api.eduwork.cn/admin/link').then(
    res => {
        this.links = res.data
    },
    error => {
    	console.log('请求失败了', error.message)
    }).catch(err=>{
       console.log(err);
    })
  }
}
</script>

<style scoped>
.footer {
  float: left;
  margin-top: 20px;
  width: 100%;
  height: 100px;
  background-color: cornflowerblue;
}
</style>

1.4 Vue使用axios向服务器提交数据

<template>
  <from action="#">
    网站名称: <input type="text" v-model="link.name">{{link.name}}<br>
    网站位置: <input type="text" v-model="link.url">{{link.url}}<br>
    位置排序: <input type="text" v-model="link.ord">{{link.ord}}<br>
    <input type="hidden" v-model="link.do_submit">{{link.do_submit}}<br>

    <button @click.prevent="doSubmit">添加数据</button>
  </from>
</template>

<script>
import axios from "axios";
export default {
  name: "MyConn",
  data() {
    return {
      num: 0,
      link: {
        name:'',
        url:'',
        ord: 0,
        do_submit: true
      }
    }
  },
  methods: {
    doSubmit() {
      axios.post('http://api.eduwork.cn/admin/link/add',this.link,{
        //将数据转换成字符串拼接
        transformRequest: [
            function (data) {
              let str = ''
              for (let key in data) {
                str += encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) + '&'
              }
              return str
            }
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(res=>{
        console.log(res);
      }).catch(err=>{
        console.log(err);
      })
    }
  }
}
</script>
<style scoped>
.myconn {
  width: 90%;
  height: 150px;
  background-color: brown;
  margin: 10px;
}
</style>

2. 为什么要封装Axios

axios 的 API 很友好，你完全可以很轻松地在项目中直接使用。
不过随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍

这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。为了提高我们的代码质量，我们应该在项目中二次封装一下 axios 再使用
举个例子：

axios('http://localhost:3000/data', {
  // 配置代码
  method: 'GET',
  timeout: 1000,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'xxx',
  },
  transformRequest: [function (data, headers) {
    return data;
  }],
  // 其他请求配置...
})
.then((data) => {
  // todo: 真正业务逻辑代码
  console.log(data);
}, (err) => {
  // 错误处理代码  
  if (err.response.status === 401) {
  // handle authorization error
  }
  if (err.response.status === 403) {
  // handle server forbidden error
  }
  // 其他错误处理.....
  console.log(err);
});

如果每个页面都发送类似的请求，都要写一堆的配置与错误处理，就显得过于繁琐了
这时候我们就需要对axios进行二次封装，让使用更为便利

3. 如何封装

封装的同时，你需要和后端协商好一些约定，请求头，状态码，请求超时时间…

设置接口请求前缀：根据开发、测试、生产环境的不同，前缀需要加以区分

请求头 : 来实现一些具体的业务，必须携带一些参数才可以请求(例如：会员业务)

状态码: 根据接口返回的不同status ，来执行不同的业务，这块需要和后端约定好

请求方法：根据get、post等方法进行一个再次封装，使用起来更为方便

请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问

响应拦截器：这块就是根据后端`返回来的状态码判定执行不同业务

3.1 设置接口请求前缀

利用node环境变量来作判断，用来区分开发、测试、生产环境.
我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址就不多说了。


// 环境的切换
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'https://www.baidu.com';} 
else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = 'https://www.ceshi.com';
} 
else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'https://www.production.com';
}

在本地调试的时候，还需要在vue.config.js文件中配置devServer实现代理转发，从而实现跨域，我们在下面也会说到Vue实现跨域的方法。

devServer: {
    proxy: {
      '/proxyApi': {
        target: 'http://dev.xxx.com',
        changeOrigin: true,
        pathRewrite: {
          '/proxyApi': ''
        }
      }
    }
  }

3.2 设置请求头与超时时间

大部分情况下，请求头都是固定的，只有少部分情况下，会需要一些特殊的请求头，这里将普适性的请求头作为基础配置。当需要特殊请求头时，将特殊请求头作为参数传入，覆盖基础配置

const instance = axios.create({
    ...
    timeout: 30000,  // 请求 30s 超时
      headers: {
        get: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        },
        post: {
          'Content-Type': 'application/json;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        }
  },
})

content-type是http请求的响应头和请求头的字段。当作为响应头时，告诉客户端实际返回的内容的内容类型。作为请求头时，客户端告诉服务器实际发送的数据类型。

具体的Content-Type类型，查看content-type类型总结

3.3 封装请求方法

先引入封装好的方法，在要调用的接口重新封装成一个方法暴露出去

get方法：我们通过定义一个get函数，get函数有两个参数，第一个参数表示我们要请求的url地址，第二个参数是我们要携带的请求参数。get函数返回一个promise对象，当axios其请求成功时resolve服务器返回值，请求失败时reject错误值。最后通过export抛出get函数。
post方法：原理同get基本一样，但是要注意的是，post方法必须要使用对提交从参数对象进行序列化的操作，所以这里我们通过node的qs模块来序列化我们的参数。这个很重要，如果没有序列化操作，后台是拿不到你提交的数据的。这就是文章开头我们import QS from 'qs';的原因。

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get({ 
  url, 
  params = {} 
}) {
  return new Promise((resolve, reject) => {
    instance.get(url, {
      params: params     
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

/** 
 * post方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
*/
export function post({ 
  url,
  data = {},
  params = {}
}) {
  return new Promise((resolve, reject) => {
    instance({
      url,
      method: 'post',
      //将数据转换成字符串拼接
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 发送的数据
      data,
      // url参数
      params

    }).then(res => {
      resolve(res.data)
    })
  })
}

把封装的方法放在一个api.js文件中

import { get, post } from './request'
export const getorglist = (params = {}) => get({ url: 'apps/api/org/list', params })

页面中就能直接调用

// .vue
import { getorglist } from '@/api'

getorglist({ id: 200 }).then(res => {
  console.log(res)
})

这样可以把api统一管理起来，以后维护修改只需要在api.js文件操作即可

3.4 请求拦截器

请求拦截器可以在每个请求里加上token，做了统一处理后维护起来也方便

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的
    const token = store.state.token;        
        token && (config.headers.Authorization = token);     
    return config
  },
  error => {
    return Promise.error(error)
  })

3.5 响应拦截器

响应拦截器可以在接收到响应后先做一层操作，如根据状态码判断登录状态、授权

// 响应拦截器
instance.interceptors.response.use(response => {
  // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
  // 否则的话抛出错误
  if (response.status === 200) {
    if (response.data.code === 511) {
      // 未授权调取授权接口
    } else if (response.data.code === 510) {
      // 未登录跳转登录页
    } else {
      return Promise.resolve(response)
    }
  } else {
    return Promise.reject(response)
  }
}, error => {
  // 我们可以在这里对异常状态作统一处理
  if (error.response.status) {
    // 处理请求失败的情况
    // 对不同返回码对相应处理
    return Promise.reject(error.response)
  }
})

3.6 Vue 封装axios（完整）

src/network/request.js

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

// 环境的切换
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'https://www.baidu.com';} 
else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = 'https://www.ceshi.com';
} 
else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'https://www.production.com';
}

//创建axios实例，设置请求头
const instance = axios.create({
    //基础路径，发请求的时候，会在端口号后更改BaseURL
    baseURL:'http://api.eduwork.cn/admin',
    timeout: 30000,  // 请求 30s 超时
    headers: {
        get: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        },
        post: {
          'Content-Type': 'application/json;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        }
  },
})

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get({ 
  url, 
  params = {} 
}) {
  return new Promise((resolve, reject) => {
    instance.get(url, {
      params: params     
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

/** 
 * post方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
*/
export function post({ 
  url,
  data = {},
  params = {}
}) {
  return new Promise((resolve, reject) => {
    instance({
      url,
      method: 'post',
      //将数据转换成字符串拼接
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 发送的数据
      data,
      // url参数
      params

    }).then(res => {
      resolve(res.data)
    })
  })
}

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的
    const token = store.state.token;        
    token && (config.headers.Authorization = token);      
    return config
  },
  error => {
    return Promise.error(error)
  }
)
  
// 响应拦截器
instance.interceptors.response.use(response => {
  // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
  // 否则的话抛出错误
  if (response.status === 200) {
    if (response.data.code === 511) {
      // 未授权调取授权接口
    } else if (response.data.code === 510) {
      // 未登录跳转登录页
    } else {
      return Promise.resolve(response)
    }
  } else {
    return Promise.reject(response)
  }
}, error => {
  // 我们可以在这里对异常状态作统一处理
  if (error.response.status) {
    // 处理请求失败的情况
    // 对不同返回码对相应处理
  	switch (error.response.status) {                
	       // 401: 未登录
	       // 未登录则跳转登录页面，并携带当前页面的路径
	       // 在登录成功后返回当前页面，这一步需要在登录页操作。                
	       case 401:                    
	           router.replace({                        
	               path: '/login',                        
	               query: { 
	                   redirect: router.currentRoute.fullPath 
	               }
	           });
	           break;
	
	       // 403 token过期
	       // 登录过期对用户进行提示
	       // 清除本地token和清空vuex中token对象
	       // 跳转登录页面                
	       case 403:
	            Toast({
	               message: '登录过期，请重新登录',
	               duration: 1000,
	               forbidClick: true
	           });
	           // 清除token
	           localStorage.removeItem('token');
	           store.commit('loginSuccess', null);
	           // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
	           setTimeout(() => {                        
	               router.replace({                            
	                   path: '/login',                            
	                   query: { 
	                       redirect: router.currentRoute.fullPath 
	                   }                        
	               });                    
	           }, 1000);                    
	           break; 
	
	       // 404请求不存在
	       case 404:
	           Toast({
	               message: '网络请求不存在',
	               duration: 1500,
	               forbidClick: true
	           });
	           break;
	       // 其他错误，直接抛出错误提示
	       default:
	           Toast({
	               message: error.response.data.message,
	               duration: 1500,
	               forbidClick: true
	           });
    }
    return Promise.reject(error.response)
  }
})

3.7 应用axios封装

提交数据

<template>
  <from action="#">
    网站名称: <input type="text" v-model="link.name">{{link.name}}<br>
    网站位置: <input type="text" v-model="link.url">{{link.url}}<br>
    位置排序: <input type="text" v-model="link.ord">{{link.ord}}<br>
    <input type="hidden" v-model="link.do_submit">{{link.do_submit}}<br>

    <button @click.prevent="doSubmit">添加数据</button>
  </from>
</template>
<script>
import {post} from '../../network/request'
export default {
  name: "MyConn",
  data() {
    return {
      num: 0,
      link: {
        name:'',
        url:'',
        ord: 0,
        do_submit: true
      }
    }
  },
  props: {
    article: {
      type: Array
    }
  },
  methods: {
    doSubmit() {
      post('/link/add',this.link).then(res=>{
          console.log(res);
        }).catch(err=>{
          console.log(err);
        })
    }
  }
}
</script>

<style scoped></style>

请求数据

<template>
  <div class="footer">
    <ul>
      <li v-for="(item,index) in links" :key="index">
        <a href="item.url">{{item.name}}</a>
      </li>
    </ul>
  </div>
</template>

<script>
import {get} from '.../network/request'
export default {
  name: "MyFooter",
  data() {
    return {
      links: []
    }
  },
  mounted() {
    get('/link',{id:1}).then(res=>{
        this.links = res.data
      }).catch(err=>{
       console.log(err);
    })
  }
}
</script>

<style scoped></style>

4. Vue中axios封装与api接口封装管理(优化)

4.1 axios封装

axios的封装根据需求的不同而不同。

优化axios封装，去掉的get和post
断网情况处理
更加模块化的api管理
接口域名有多个的情况
api挂载到vue.prototype上省去引入的步骤

在项目的src目录下，新建一个network文件夹，作为网络请求模块，request.js封装axios，api下的index.js用来统一管理接口。
src/network/http.js

/**
 * axios封装
 * 请求拦截、响应拦截、错误统一处理
 */
import store from "@/store";
import axios from "axios";
import QS from 'qs';           // 引入qs模块，用来序列化post类型的数据，后面会提到
import { Toast } from 'vant';          // vant的toast提示框组件，可根据自己的ui组件更改。
import nprogress from "nprogress";    //引入加载进度条
import "nprogress/nprogress.css"      //引入加载进度条样式

/** 
 * 提示函数 
 * 禁止点击蒙层、显示一秒后关闭
 */
const tip = msg => {    
    Toast({        
        message: msg,        
        duration: 1000,        
        forbidClick: true    
    });
}

/** 
 * 跳转登录页
 * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
 */
const toLogin = () => {
    router.replace({
        path: '/login',        
        query: {
            redirect: router.currentRoute.fullPath
        }
    });
}

/** 
 * 请求失败后的错误统一处理 
 * @param {Number} status 请求失败的状态码
 */
const errorHandle = (status, message) => {
  switch (status) {
    case 401:     
      //store.dispatch('userLogout')
      // 401: 未登录
      // 未登录则跳转登录页面，并携带当前页面的路径
      // 在登录成功后返回当前页面，这一步需要在登录页操作。 
      toLogin()
      break
    case 403:
      // 403 token过期
      // 登录过期对用户进行提示
      // 清除本地token和清空vuex中token对象
      // 跳转登录页面
      tip('登录过期，请重新登录')     
      // 清除token
      localStorage.removeItem('token');
      store.commit('loginSuccess', null);  
      // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
      setTimeout(() => {                        
          toLogin();                  
      }, 1000); 
      break
    case 404:
      // 404请求不存在
      tip('请求的资源不存在')     
      break
    default: 
      Toast.failed(message)
  }
}

// 创建axios实例,
const instance  = axios.create({
    //baseURL:'/api',        //基础路径，requests发出的请求在端口号后面会跟改baseURl，这里的接口可能有多个域名的情况，后面会通过js变量来控制接口api域名
    timeout: 5000,           // 请求超时时间
    withCredentials: true,    // 允许携带cookie
    headers: {                 //设置post请求头
        get: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        },
        post: {
          'Content-Type': 'application/json;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        }
})


/** 
 * 请求拦截器 
 * 每次请求前，如果存在token则在请求头中携带token 
 */ 
instance.interceptors.request.use(
    //config内主要是对请求头Header配置
    config => {
        // 每次发送请求之前判断vuex中是否存在token        
        // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
        // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。   
        if(store.state.user.token) {
            config.headers.token = store.state.user.token
            //有些接口是 config.headers.Authorization = token
        }
        //开启进度条
        nprogress.start()
        return config;
    },
    error => Promise.reject(error)
)

//配置响应拦截器
instance.interceptors.response.use(
	// 请求成功
    response => {
    	//响应成功，关闭进度条
        nprogress.done()
		// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据     
        // 否则的话抛出错误
        if (response.status === 200) {            
            return Promise.resolve(response);        
        } else {            
            return Promise.reject(response);        
        }   
    },
    // 服务器状态码不是2开头的的情况
    // 这里可以跟你们的后台开发人员协商好统一的错误状态码    
    // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
    // 下面列举几个常见的操作，其他需求可自行扩展
    error => {
    	const { response } = error
    	if(response) {
    		// 请求已发出，但是不在2xx的范围 
    		errorHandle(response.status, response.data.message || '网络连接失败，请稍后重试！')
    		return Promise.reject(error)
    	} else {
    		// 处理断网的情况
            // eg:请求超时或断网时，更新state的network状态
            // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
            // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
            if (!window.navigator.onLine) {
               store.commit('changeNetwork', false);
            } else {
                return Promise.reject(error);
            }
    	}  
    }
)

//对外暴露
export default instance;

这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过。这时候或许有些小伙伴会有疑问了，就是每个请求都携带token，那么要是一个页面不需要用户登录就可以访问的怎么办呢？其实，你前端的请求可以携带token，但是后台可以选择不接收啊！

4.2 api接口统一管理

为了使得api接口管理

更加模块化
更方便多人开发，有效减少解决命名冲突
处理接口域名有多个情况

这里这里呢新建了一个api文件夹，里面有一个index.js和一个base.js，以及多个根据模块划分的接口js文件。index.js是一个api的出口，base.js管理接口域名，其他js则用来管理各个模块的接口。

src/network/index.js

// 在当前这个模块：API进行统一管理
import requests from "./http";
import mockAjax from './mockAjax'   //模拟数据接口

/*--------- 首页 ---------*/

//三级联动接口
// export const reqCategoryList = ()=>{
//     //发请求,request模块已经配置了/api，可以去掉/api,
//     return requests({url: '/product/getBaseCategoryList',method: 'get'})
// }
//简化写法
export const reqCategoryList = ()=> requests.get('/product/getBaseCategoryList')

//获取广告轮播列表
export const reqBannersList = ()=> mockAjax.get('/banners')

//获取首页楼层列表
export const reqFloors = ()=> mockAjax.get('/floors')


/*--------- 商品列表 ---------*/

//请求搜索匹配的商品商品的相关数据，给服务器传递的serachParam，至少是一个空对象，否则会请求失败
export const reqSearchList = (searchParams) => requests({url:'/list', method:'post', data: searchParams})

//获取产品详情
export const reqGoodsInfo = (goodId)=> requests({url: `/item/${goodId}`, method:'get'})

/*--------- 购物车 ---------*/

若是需要分模块管理api接口
可以在src下新建一个api接口，里面有一个index.js，以及多个根据模块划分的接口js文件。index.js是一个api的出口，其他js则用来管理各个模块的接口。

src/api/index.js

/** 
 * api接口的统一出口
 */
// 文章模块接口
import article from '@/api/article';
// 其他模块的接口…… 
// 导出接口
export default {    
    article,
    // ……
}

index.js是一个api接口的出口，这样就可以把api接口根据功能划分为多个模块，利于多人协作开发，比如一个人只负责一个模块的开发等，还能方便每个模块中接口的命名哦。

src/api/base.js

const base = {    
    sq: 'https://xxxx111111.com/api/v1',    
    bd: 'http://xxxxx22222.com/api'
}

export default base;

通过base.js来管理我们的接口域名，不管有多少个都可以通过这里进行接口的定义。即使修改起来，也是很方便的。

最后就是接口模块的说明，例如上面的article.js:
src/api/article.js

/**
 * article模块接口列表
 */
import requests from "@/network/http";  // 导入request中创建的axios实例
import base from './base'; // 导入接口域名列表
import qs from 'qs'; // 根据需求是否导入qs模块 
const article = {    
    // 新闻列表    
    articleList () {        
       return requests.get(`${base.sq}/topics`) 
    },    
    // 新闻详情,演示    
    articleDetail (id, params) {        
         return requests.get(`${base.sq}/topic/${id}`, {
         	params: params
         })
    },
    // 新闻详情,演示 (另外一种写法)  
    articleDetail(id, params) {
		return requests({
              url: `${base.sq}/topic/`,
              method: 'get',
              params:{ id },
              hideloading: true
            })
	},
	// post提交    
    login (params) {        
        return requests.post(`${base.sq}/accesstoken`, qs.stringify(params));    
    },
    // post提交 (另外一种写法)      
    login (params) {        
      return requests({
	      url:`${base.sq}/accesstoken`,
	      method:'post',
	      data:qs.stringify(params), //注意post提交用data参数
	      hideloading: true
     })   
    },
    // 其他接口…………
}
export default article;

通过直接引入我们封装好的axios实例，然后定义接口、调用axios实例并返回，可以更灵活的使用axios，比如你可以对post请求时提交的数据进行一个qs序列化的处理等。
请求的配置更灵活，你可以针对某个需求进行一个不同的配置。关于配置的优先级，axios文档说的很清楚，这个顺序是：在 lib/defaults.js 找到的库的默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后者将优先于前者。
restful风格的接口，也可以通过这种方式灵活的设置api接口地址。

4.3 在组件中使用

import {article} from '@/api/index'
created(){
   article.articleList().then(info=>{
       if(info.code==200)
     this.num=info.data
  }
     })
}

4.4 api挂载到vue.prototype上省去引入的步骤

为了方便api的调用，我们需要将其挂载到vue的原型上。在main.js中：

import Vue from 'vue'
import App from './App'
import router from './router' // 导入路由文件
import store from './store' // 导入vuex文件
import * as api from '@/api'  //统一接口api
new Vue({
    render: (h) => h(App),
    beforeCreate() {
    	//全局事件总线
    	Vue.prototype.$bus = this;
        Vue.prototype.$api = api;     // 将api挂载到vue的原型上
  },
})

在组件中使用

//无需导入
methods: {    
    onLoad(id) {      
        this.$api.article.articleDetail(id, {        
            api: 123      
        }).then(res=> {
            // 执行某些操作      
        })    
    }  
}

再提一下断网的处理，这里只做一个简单的示例：
App.vue

<template>  
    <div id="app">    
        <div v-if="!network">      
            <h3>我没网了</h3>      
            <div @click="onRefresh">刷新</div>      
        </div>    
        <router-view/>      
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {  
     name: 'App',  
     computed: {    
         ...mapState(['network'])  
     },  
     methods: {    
         // 通过跳转一个空页面再返回的方式来实现刷新当前页面数据的目的
         onRefresh () {      
             this.$router.replace('/refresh')    
         }  
     }
 }
</script>

在request.js中介绍了，我们会在断网的时候，来更新vue中network的状态，那么这里我们根据network的状态来判断是否需要加载这个断网组件。断网情况下，加载断网组件，不加载对应页面的组件。当点击刷新的时候，我们通过跳转refesh页面然后立即返回的方式来实现重新获取数据的操作。因此我们需要新建一个refresh.vue页面，并在其beforeRouteEnter钩子中再返回当前页面。

5. 使用Vue-cli解决Ajax跨域问题

使用vue-cli开启代理服务器ajax跨域问题

方法一：在vue.config.js中添加如下配置：

module.exports={
	//开启代理服务器，配置跨域请求
	devServer:{
	  proxy:"http://localhost:5000"
	}
}

优点：配置简单，请求资源时直接发给前端（8080）即可。
缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源），在同级目录public下，是前端资源，现在前端资源找，没有才会请求服务器。

方法二：编写vue.config.js配置具体代理规则：

module.exports = {
devServer: {
	open: true, //是否自动打开浏览器
	https: false, //是否开启https
	hotOnly: false,
    proxy: {         //配置跨域
      '/api1': {
        // 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000', // 将请求代理到目标服务器上
        changeOrigin: true,
        //重写路径 将请求中的/api1 重写为为空字符串,否则代理请求发到服务器，是请求/api1/xxx下的东西，服务器里不一定有api1,需要把api1去掉
        pathRewrite: { '^/api1': '' },
        ws: true,           //用于支持websocket
        changeOrigin: true, //用于控制请求头中的host值
      },
      '/api2': {
        // 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001', // 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: { '^/api2': '' },
        ws: true,           //用于支持websocket
        changeOrigin: true, //用于控制请求头中的host值
      },
    },
  },
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
缺点：配置略微繁琐，请求资源时必须加前缀。

App.vue

<template>
  <div id="app">
    <!-- 在8080端口上获取5000和5001端口上的数据  -->
    <button @click="getStudents">获取学生信息</button>
    <button @click="getCars">获取汽车信息</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "App",
  methods: {
    getStudents() {
      //这里加前缀api1走代理，不加前缀api1就不走代理，找前端资源，即public目录下
      axios.get("http://localhost:8080/api1/students").then(
        (response) => {
          console.log("请求成功了", response.data);
        },
        (error) => {
          console.log("请求失败了", error.message);
        }
      );
    },
    getCars() {
      axios.get("http://localhost:8080/api2/cars").then(
        (response) => {
          console.log("请求成功了", response.data);
        },
        (error) => {
          console.log("请求失败了", error.message);
        }
      );
    },
  },
};
</script>

在这里插入图片描述

6. GitHub用户搜索案例

public/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器端的特殊配置，含义市让IE浏览器以最高渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想端口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 引入第三方样式 -->
    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">

    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

scr/main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this
  }
}).$mount('#app')

src/components/Search.vue

<template>
  <div>
    <section class="jumbotron">
        <h3 class="jumbotron-heading">Search Github Users</h3>
        <div>
            <input type="text" placeholder="enter the name you search" v-model="keyWord" />&nbsp;
            <button @click="searchUsers">Search</button>
        </div>
    </section>
  </div>
</template>

<script>
import axios from "axios"
export default {
    name:'Search',
    components: {},
    props: {},
    data() {
        return {
            keyWord: ""
        };
    },
    methods: {
        searchUsers() {
            //请求前更新List数据
            this.$bus.$emit('updateListData', {isFirst: false, isLoading:true, errMsg: '', users:[]})
            axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                response => {
                    // console.log('请求成功了',response.data.items);
                    this.$bus.$emit('updateListData', {isLoading:false, errMsg: '', users:response.data.items})

                },
                error => {
                    console.log('请求失败了')
                    this.$bus.$emit('updateListData', {isLoading:false, errMsg: error.message, users:[]})
                })
        },
    }
};
</script>
<style lang="less" scoped>

</style>

src/components/List.vue

<template>
    <div class="row">
        <!-- 展示用户列表 -->
        <div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login">
            <a :href="user.html_ur" target="_blank">
            <img :src="user.avatar_url" style='width: 100px'/>
            </a>
            <p class="card-text">{{user.login}}</p>
        </div>
        <!-- 展示欢迎词 -->
        <h3 v-show="info.isFirst">welecom to use</h3>
        <!-- 展示加载中 -->
        <h3 v-show="info.isLoading">loading.....</h3>
        <!-- 展示错误信息 -->
        <h3 v-show="info.errMsg">{{info.errMsg}}</h3>
    </div>
</template>

<script>
export default {
  name: 'List',
  components: {},
  props: {},
  data() {
    return {
      info: {
        isFirst: true,
        isLoading: false,
        errMsg: "",
        users: []
      }
    };
  },
  mounted() {
    this.$bus.$on('updateListData', (dataObj) =>{
        // console.log('List组件收到数据',dataObj);
        // 通过对象扩展运算符，合并对象
        this.info = {...this.info, ...dataObj}
    })
  }
};
</script>

<style scoped>

.album {
  min-height: 50rem; /* Can be removed; just added for demo purposes */
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #f7f7f7;
}

.card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: .75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}

</style>

App.vue

<template>
  <div class="container">
    <Search/>
    <List/>
  </div>
</template>

<script>
import Search from './components/Search'
import List from './components/List.vue'
export default {
  name: 'App',
  components: {Search,List}
}
</script>

<style>
</style>

效果
在这里插入图片描述

7. Vue-resource

Vue项目常用的两个Ajax库

axios : 通用的Ajax请求库，官方推荐，效率高
vue-resource: vue插件库，vue 1.x使用广泛，官方已不维护
下载vue-resource 库 npm i vue-resource
使用vue-resource Vue.use(VueResource)

src/main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
//使用插件
Vue.use(VueResource)

new Vue({
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this
  }
}).$mount('#app')

src/components/Search.vue

export default {
    name:'Search',
    components: {},
    props: {},
    data() {
        return {
            keyWord: ""
        };
    },
    methods: {
        searchUsers() {
            //请求前更新List数据
            this.$bus.$emit('updateListData', {isFirst: false, isLoading:true, errMsg: '', users:[]})
            //还是github搜索案例，但是使用this.$http来使用vue-resource，其他不变
            this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                response => {
                    // console.log('请求成功了',response.data.items);
                    this.$bus.$emit('updateListData', {isLoading:false, errMsg: '', users:response.data.items})

                },
                error => {
                    console.log('请求失败了')
                    this.$bus.$emit('updateListData', {isLoading:false, errMsg: error.message, users:[]})
                })
        },
    }
};

CaRuJan

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue全家桶（二）：Vue中的axios异步通信

从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API [JS中链式编程]拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF（跨站请求伪造）使用axios需要下载库联系阅读：前端跨域（待更新）
复制链接

扫一扫