android封装全局调用的toast_vue封装axios请求

vue项目的前期配置

新建vue项目，下载axios，并在main.js中导入axios

npm i axios -S

//main.jsimport axios from "axios";

封装axios实例 —— request.js

在项目src目录下新建utils文件夹，然后在其中新建 request.js文件，这个文件是主要书写axios的封装过程。

/****   request.js   ****/// 导入axiosimport axios from 'axios'// 使用element-ui Message做消息提醒import { Message} from 'element-ui';// 将请求头改为 application/x-www-form-urlencoded axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';// 使用transformRequest将post请求方式转为FormDataaxios.defaults.transformRequest = [function (data) {  let ret = ''  for (let it in data) {    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'  }  return ret}]//1. 创建新的axios实例，const service = axios.create({  // 公共接口--这里注意后面会讲  baseURL: process.env.BASE_API,  // 超时时间 单位是ms，这里设置了3s的超时时间  timeout: 3 * 1000})// 2.请求拦截器service.interceptors.request.use(config => {  //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加   //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie   const token = sessionStorage.getItem('名称');//这里取token之前，你肯定需要先拿到token,存一下   if(token){      config.params = {'token':token} //如果要求携带在参数中      config.headers.token= token; //如果要求携带在请求头中    }  return config}, error => {  Promise.reject(error)})// 3.响应拦截器service.interceptors.response.use(response => {  //接收到响应数据并成功后的一些共有的处理，关闭loading等    return response}, error => {   /***** 接收到异常响应的处理开始 *****/  if (error && error.response) {    // 1.公共错误处理    // 2.根据响应码具体处理    switch (error.response.status) {      case 400:        error.message = '错误请求'        break;      case 401:        error.message = '未授权，请重新登录'        break;      case 403:        error.message = '拒绝访问'        break;      case 404:        error.message = '请求错误,未找到该资源'        window.location.href = "/NotFound"        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}`    }  } else {    // 超时处理    if (JSON.stringify(error).includes('timeout')) {      Message.error('服务器响应超时，请刷新当前页')    }    error.message('连接服务器失败')  }  Message.error(error.message)  /***** 处理结束 *****/  //如果不需要错误处理，以上的处理过程都可省略  return Promise.resolve(error.response)})//4.导入文件export default service

封装请求

在项目src目录下的utils文件夹中新建 http.js文件，这个文件是主要书写几种请求的封装过程。

/****   http.js   ****/// 导入封装好的axios实例import request from './request'const http ={    /**     * methods: 请求     * @param url 请求地址      * @param params 请求参数     */    get(url,params){        const config = {            method: 'get',            url:url        }        if(params) config.params = params        return request(config)    },    post(url,params){        const config = {            method: 'post',            url:url        }        if(params) config.data = params        return request(config)    },    put(url,params){        const config = {            method: 'put',            url:url        }        if(params) config.params = params        return request(config)    },    delete(url,params){        const config = {            method: 'delete',            url:url        }        if(params) config.params = params        return request(config)    }}//导出export default http

封装API，用于发送请求

在项目src目录下新建api文件夹，然后在其中新建 api.js文件，这个文件是主要书写API的封装过程。

写法一：适合分类导出

import http from '../utils/http'// /** *  @parms resquest 请求地址 例如：http://197.82.15.15:8088/request/... *  @param '/testIp'代表vue-cil中config，index.js中配置的代理 */let resquest = "/testIp/request/"// get请求export function getListAPI(params){    return http.get(`${resquest}/getList.json`,params)}// post请求export function postFormAPI(params){    return http.post(`${resquest}/postForm.json`,params)}// put 请求export function putSomeAPI(params){    return http.put(`${resquest}/putSome.json`,params)}// delete 请求export function deleteListAPI(params){    return http.delete(`${resquest}/deleteList.json`,params)}

写法二：使用全部导出

import http from '../utils/http'// /** *  @parms resquest 请求地址 例如：http://197.82.15.15:8088/request/... *  @param '/testIp'代表vue-cil中config，index.js中配置的代理 */let resquest = "/testIp/request/"// get请求export default{    getListAPI(params){        return http.get(`${resquest}/getList.json`,params)    },     postFormAPI(params){        return http.post(`${resquest}/postForm.json`,params)    }}

注意：一个项目中如果后台请求不是同一个ip，而是多个ip的时候，可以在api文件夹下建立多个js，用来调用请求。

我们看下之前遗留的一个问题：

//创建新的axios实例，const service = axios.create({  baseURL: process.env.BASE_API,  timeout: 3 * 1000})

在之前封装公共接口的baseUrl时候，用了webpack中的全局变量process.env.BASE_API，而不是直接写死ip，也是为了适应多个后台或者开发的时候的api地址和发布的时候的api地址不一样这种情况。

配置config文件中的地址

在项目config目录下的修改 index.js文件，这里是主要书写配置多个后台接口。关于代理可能出现的问题，可以查看我的另一篇文档VueCil代理本地proxytable报错的解析；

dev: {// Paths    assetsSubDirectory: 'static',    assetsPublicPath: '/',// 后端请求地址代理，配置后testIp再之后的页面调用时就直接指代 http://197.82.15.15:8088    proxyTable: {        '/api': {          target: 'http://000.000.000:8888',          changeOrigin: true,          pathRewrite: {             '^/testIp': ''          }    },    // Various Dev Server settings    host: 'localhost', // can be overwritten by process.env.HOST    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined    autoOpenBrowser: false,    errorOverlay: true,    notifyOnErrors: true,    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-    /**        * Source Maps        */    // https://webpack.js.org/configuration/devtool/#development    devtool: 'cheap-module-eval-source-map',    // If you have problems debugging vue-files in devtools,    // set this to false - it *may* help    // https://vue-loader.vuejs.org/en/options.html#cachebusting    cacheBusting: true,    cssSourceMap: true},

如果有多后台，就可以在api文件夹下另外新建一个elseApi.js ，书写当前ip下的接口请求。方法同上，只是 let resquest = "/elseIp/request/" 调用的时候把端口更改一下。

以上 关于配置环境 和接口 基本搭建完毕，下面看一下调用

如何在vue文件中调用

方法一：用到哪个api 就调用哪个接口——适用于上文接口分类导出；

import {getListAPI,postFormAPI, putSomeAPI, deleteListAPI} from '@/api/api'methods: {    //promise调用，链式调用    //   不传参    getList() {    getListAPI().then(res => console.log(res)).catch(err => console.log(err))    },    //传参    getList(formData) {    let data = formData    getListAPI(data).then(res => console.log(res)).catch(err => console.log(err))    },    //async await同步调用    async postForm(formData) {    const postRes = await postFormAPI(formData)    const putRes = await putSomeAPI({        data: 'putTest'    })    const deleteRes = await deleteListAPI(formData.name)    // 数据处理    console.log(postRes);    console.log(putRes);    console.log(deleteRes);    },}

方法二 ：把api全部导入，然后用哪个调用哪个api——适用于全部导出

import api from '@/api/api'methods: {    getList() {    api.getListAPI(data).then(res => {        //数据处理    }).catch(err => console.log(err))    }}