axios 笔记

1、axios拦截器引发的备案

// axios.defaults.headers.post['Content-Type'] = 'application/json';
// axios.interceptors.request.use(req => {
//     let data = req.data
//     console.log('befor convert',data)
//     let params = new URLSearchParams();
//     for (let name in data) {
//            params.append(name,data[name])
//     }
//     req.data = params.toString()
//     console.log('after convert',req)
//     return req
// },error => {
//     return Promise.reject(error)
// })

把这段代码去掉就好，要不然就出现这个问题：
参考：
总结：
1、加上这个，axios的默认content-type会从application/json变成application/x-www-form-urlencoded
2、去掉上面的代码，get请求的时候使用qs.stringify()

2、axios 发送数据，java后台如何接收
1）java后台参数接收值类型，如String，int，那么axios传递的时候用qs.stringify，具体代码如下：

this.$post('http://localhost:9090/user/login',Qs.stringify(this.user))
                     .then(res=>{
                         if(res.success){
                           this.$Message.success('登录成功，正在跳转...');
                           this.setUserInfo(res.data.user);
                           this.$router.push('/');
                         }
                     })
                     .catch(error=>{
                 })

                 @RequestMapping(value = "/login",method = RequestMethod.POST)
public String login(@RequestParam String name,@RequestParam String password,HttpSession session) {}
2）java后台参数接收实体类类型，如User，那么axios传递的时候直接传递，具体代码如下：

this.$post('http://localhost:9090/teacher/save',{

teacher:this.teacher,labels:this.label.list

})

.then(res=>{

console.log('res=',res)

})

.catch(err=>{
                 })

                 @RequestMapping(value = "/save",method = RequestMethod.POST)
public String save(@RequestBody TeacherLabels teacherLabels){

AjaxResult result = new AjaxResult();
 result.setSuccess(true);
 return JSON.toJSONString(result);
}
@Getter

@Setter

@ToString

public class TeacherLabels {

Teacher teacher;

List labels;

}
3、axios 拦截器设置headers的Authorization

axios.interceptors.request.use(config => {

let token = Cookies.get("token");

if (token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token

config.headers.Authorization = token;

}

return config

},error => {

return Promise.reject(error)

})

4、axios上传视频，注意要设置spring-boot配置上传文件大小设置，
否则会报：springboot org.apache.tomcat.util.http.fileupload.FileUploadBase$SizeLimitExceededException: the request was rejected because its size (13762551) exceeds the configured maximum (10485760)

//上传老师视频
        uploadTeacherVideo(e){
            var file = e.target.files[0]
            if (!/.(mp4|avi)$/.test(e.target.value)) {
                this.$Message.error({
                    content:'视频类型必须是.mp4、.avi中的一种',duration:3
                });
                return false
            }
            let formdata = new FormData();
            formdata.append('imgStream',file);
            console.log('正在上传视频。。。')
            this.uploadFileToQiniu(formdata);
        },uploadFileToQiniu(formdata){
            this.$post(`${this.$url}/teacher/uploadFileToQiniu`,formdata)
            .then(res=>{
                if(res.data.success){
                    let hashKey = res.data.data;
                    this.avatarSrc = `${this.$qiniuImgUrl}/${hashKey.key}`;
                    this.$Message.success({
                        content:'上传成功！',duration:3
                    });
                }else{
                    this.$Message.error({
                        content:res.data.msg,duration:3
                    });
                }
            })
            .catch(err=>{
            })
    },修改application.properties文件：
    #最大上传文件大小
spring.http.multipart.max-file-size=50mb
spring.http.multipart.max-request-size=50mb

参考：springBoot上传文件大小设置

5、axios上传图片(及vue上传图片到七牛)）

6、axios get post传参

axios.get(url,{ params: {id:'',name:''}})
axios.post(url,{id:'',name: ''},{ params: {id2: '',name2: ''}})
axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.options(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,config]])
axios.patch(url[,config]])
const instance = axios.create({

baseURL: 'https://some-domain.com/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'}

});
axios#request(config)
axios#get(url[,config])
axios#delete(url[,config])
axios#head(url[,config])
axios#options(url[,config])
axios#post(url[,config]])
axios#put(url[,config]])
axios#patch(url[,config]])
axios#getUri([config])

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!