【常用代码08】封装axios的get和post请求方法，在nodejs中使用

引入axios，nodejs引入和vue项目引入

// nodeJs
const axios = require('axios');
// js 
// import axios from 'axios'

封装get方法

// 定义get请求方法
const axiosGet = function (url, params) {
    return new Promise((resolve, reject) => {
        axios
            .get(url, {
                params,
            })
            .then(res => {
                resolve(res);
            })
            .catch(err => {
                reject(err);
            });
    });
};

---

封装post请求方法。

// 定义post请求方法
const axiosPost = function (url, params) {
    return new Promise((resolve, reject) => {
        axios
            .post(url, params)
            .then(res => {
                resolve(res);
            })
            .catch(err => {
                reject(err);
            });
    });
};

执行案例：

//  定义获取token方法
async function getToken() {
    const params = {
        grant_type: '',
        appid: 'wxb************', // 你的appid  1
        secret: '88e3947ff9-----------------', // 你的secret 2
    };
    let res = await axiosGet('https://api.weixin.qq.com/cgi-bin/token', params);
    return res.data.access_token;
}

async和await，就是把异步请求，转为同步请求。
通俗点说就是。我必须先得到这个token的值，才能进入下一步。虽然运行速度变慢，但是。得到了值，
有些方法必须有了这个值才能进行下一步。

---

vue项目封装axios请求代码

复制可用。

import axios from 'axios'
import {
	Notification,
	MessageBox,
	Message
} from 'element-ui'



axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
	// axios中请求配置有baseURL选项，表示请求URL公共部分
	baseURL: '/',
	// 超时
	timeout: 10000
})
// request拦截器
service.interceptors.request.use(config => {
	// 是否需要设置 token
	const isToken = (config.headers || {}).isToken === false

	// config.headers['Authorization'] = sessionStorage.getItem('token') // 让每个请求携带自定义token 请根据实际情况自行修改
	config.headers['token'] = sessionStorage.getItem('token') // 让每个请求携带自定义token 请根据实际情况自行修改

	// get请求映射params参数
	if (config.method === 'get' && config.params) {
		let url = config.url + '?';
		for (const propName of Object.keys(config.params)) {
			const value = config.params[propName];
			var part = encodeURIComponent(propName) + "=";
			if (value !== null && typeof(value) !== "undefined") {
				if (typeof value === 'object') {
					for (const key of Object.keys(value)) {
						let params = propName + '[' + key + ']';
						var subPart = encodeURIComponent(params) + "=";
						url += subPart + encodeURIComponent(value[key]) + "&";
					}
				} else {
					url += part + encodeURIComponent(value) + "&";
				}
			}
		}
		url = url.slice(0, -1);
		config.params = {};
		config.url = url;
	}
	return config
}, error => {
	console.log(error)
	Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
		// console.log(res, '111');
		return res.data
	},
	error => {
		console.log('err' + error)
		let {
			message
		} = error;
		if (message == "Network Error") {
			message = "后端接口连接异常";
		} else if (message.includes("timeout")) {
			message = "系统接口请求超时";
		} else if (message.includes("Request failed with status code")) {
			message = "系统接口" + message.substr(message.length - 3) + "异常";
		}
		Message({
			message: message,
			type: 'error',
			duration: 5 * 1000
		})
		return Promise.reject(error)
	}
)

export default service

这个是对于axios的请求进行了封装（文件名叫 axios.js）。
用法看下面。

案例如下：

// 这里引入的是上面那个一大段代码
import HttpRequest from '../axios.js'

// 查询项目列表
export function getProjectList(data) {
	return HttpRequest({
		method: 'post',
		url: "/admin/Project/list",
		data: data
	})
}
// 根据id、类别查询案卷详情
export function getRecordList(data) {
	return HttpRequest({
		method: 'post',
		url: "admin/Dossier/list",
		data: data
	})
}

不管是post请求还是get请求，写法都是这样，只要改动method就好了。

只需要在相应的vue页面引入该方法，以图中所显示的方式引入。即可在method中调用。
如下

只需要在定义的时候命名get或者post，写法都是这样。假设是get请求，带参为id，那就跟这个post请求一模一样。只是参数只有一个而已。

这种需要把参数一个个拼接，不仅不好改，而且不美观。如果需要加参数，也不好改，不方便。

vue.config.js

一样的，复制可用，都是跟上面那个axios都配合好的了。

const webpack = require('webpack')

module.exports = {
    lintOnSave: false,
    devServer: {
        port: 8088,
        host: '0.0.0.0',
        open: true,
        proxy: {
            "/": {
                target: "http://192.168.1.106:71",// 本地静态地址
 //				target: "http://gbm666.top",// 打包请改成服务器地址
                changeOrigin: true,
                pathRewrite: {
                    "^/api": "/",
                }
            },
        }
    },
    configureWebpack: {
        plugins: [
          new webpack.ProvidePlugin({
              $: 'jquery',
              jQuery: 'jquery',
              'window.jQuery': 'jquery',
              'window.$': 'jquery'
          }),
        ]
    },
  publicPath:'./',
  assetsDir:'./',
  outputDir: 'dist',//打包输出文件名，可更改
}