uniapp中使用axios 将post方法传参改成get传参方式

uniapp中使用axios 将post方法传参改成get传参方式

  • 安装axios
  • 封装axios请求 适配uniapp语法
  • main.js文件中引入
  • methods中使用
  • 传递参数区别
    • post传参
    • post转换成get方式传参

安装axios

npm install axios

封装axios请求 适配uniapp语法

// service.js文件

import Vue from 'vue'
import axios from 'axios'
const service = axios.create({
    withCredentials: true,
    crossDomain: true,
    baseURL:'xxxxxxxxxxxxxxx', //项目调用的后端地址
    timeout: 6000
})

// request拦截器,在请求之前做一些处理
service.interceptors.request.use(
    config => {
        // 给请求头添加token
		config.headers["token"] = 'xxxxxxxxxxxxxxxxxx'
        return config;
    },
    error => {
        console.log(error); // for debug
        return Promise.reject(error);
    }
);

//配置成功后的拦截器
service.interceptors.response.use(res => {
    if (res.data.status== 200) {
        return res.data
    } else {
        return Promise.reject(res.data.msg);
    }
}, error => {
    return Promise.reject(error)
})


axios.defaults.adapter = function(config) { //自己定义个适配器,用来适配uniapp的语法
    return new Promise((resolve, reject) => {
        console.log(config)
        var settle = require('axios/lib/core/settle');
        var buildURL = require('axios/lib/helpers/buildURL');
        uni.request({
            method: config.method.toUpperCase(),
            url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
            header: config.headers,
            data: config.data,
            dataType: config.dataType,
            responseType: config.responseType,
            sslVerify: config.sslVerify,
            complete: function complete(response) {
                console.log("执行完成:",response)
                response = {
                    data: response.data,
                    status: response.statusCode,
                    errMsg: response.errMsg,
                    header: response.header,
                    config: config
                };
                settle(resolve, reject, response);
            }
        })
    })
}
export default service

main.js文件中引入

import Vue from 'vue'
import axios from './utils/axios0.js'


Vue.config.productionTip = false

Vue.prototype.$axios = axios

methods中使用

axios会自动将 params 对象里面的数据拼接到 url 后面

	submit(params) {
	  Vue.prototype.$axios({
	    url: '/actTask/pass',
	    method:'post' ,
		header: http.header, //设置请求头
	    params  //axios会自动将 params 对象里面的数据拼接到 url 后面
	  }).then(res=>{
	  	console.log(res,'成功返回值')
	  }).catch(err=>{
		console.log(err,'失败返回值')
	  })
	}

传递参数区别

post传参

uniapp中使用axios 将post方法传参改成get传参方式_第1张图片

post转换成get方式传参

uniapp中使用axios 将post方法传参改成get传参方式_第2张图片

你可能感兴趣的:(uni,app,随录,前端)