2021-04-07 vue-cli4中axios写法参考

安装axios

npm install axios vue-axios --save

在main.js中导入axios

import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App)
app.use(VueAxios, axios)// 必不可少
app.mount('#app')

在.vue中使用

//get和delete
this.axios({
    url: '接口',
    method: 'get/delete',
    params: {//这边是params噢！！！！！！！
	    user: this.user//举个例子
    },
}).then(
    (res) => {
      console.log(res);
}).catch((err) =>{
	  console.log(err)
})



//post或put类型     content-type:x-www-form-urlencoded
import qs from 'qs' //需要qs对data进行序列化
this.axios({
    url: '接口',
    method: 'post/put',
    transformRequest: [
    	function (data) {
        	//在请求之前对data传参进行格式转换
            data = qs.stringify(data);
            return data;
        }
    ],
    data: {//这边是data噢！！！！！！！
	    user: this.user//举个例子
    },
    headers:{
    	'Content-Type':'application/x-www-form-urlencoded'
    }
}).then(
    (res) => {
      console.log(res);
}).catch((err) =>{
	  console.log(err)
})


//需要传文件的得用formData传参噢~~~~~~~~
//post或put类型     content-type: 'multipart/form-data;boundary=<calculated when request is sent>'

let formData=new FormData();
formData.append('user',this.user);

this.axios({
    url: '接口',
    method: 'post/put',
    data: formData//注意，这里没得花括号啦
    headers:{
    	'Content-Type': 'multipart/form-data;boundary=<calculated when request is sent>'
    },
}).then(
    (res) => {
      console.log(res);
}).catch((err) =>{
	  console.log(err)
})

      

标签：cli4,axios,console,07,res,user,data,log
来源： https://blog.csdn.net/Sammmmmmmy/article/details/115497901