欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue系列-axios请求与拦截综合应用

程序员文章站 2022-07-04 12:02:35
...

1.封装axios请求与回复拦截器

import axios from 'axios'
import {Message} from 'element-ui'

//定义axios的baseURL 
axios.defaults.baseURL = 'http://localhost:8080/api/' 

// request拦截器
axios.interceptors.request.use(function (config) {
   // 在发送请求之前做些什么
   return config
   }, function (error) {
   // 对请求错误做些什么
   console.log(error) // for debug
   return Promise.reject(error)
   });
   


//response拦截器
axios.interceptors.response.use(
   response => {
      //如果返回成功对respone做什么处理     
      return response.data

   },
   error => {
      //如果返回错误,对error做什么处理
      // console.log(error.response) 取error中response内容
     
      Message({
         type: 'warning',
         showClose: true,
         message: '连接超时'
      })
      return Promise.reject('error')
   })

export default axios

2. 对axios请求方法集中定义

// 引入上述封装的axios
import axios from '@/request'

//按Id获取文件 get方法
export function getArticleById(id) {
   return axios({
     method: 'get',
     url: `/queryById/${id}`,
    
   });
 }

 //保存Md文件 post方法
export function postMd(name,typeId,content){
   return  axios({
      method: 'post',
      url: `/saveMd`,
      data: {
         name: name,
         typeId: typeId,
         content: content
      },

   })
}

//上传文件 post方法
export const uploadFile = (params) => {
   return axios({
     method: 'post',
     url: `/uploadFile`,
     data: params,
     headers: {
       'Content-Type': 'multipart/form-data'
     }
   });
 }

 //查询所有文章 get方法
export function getAll() {
   return axios({
     method: 'get',
     url: `/queryAll`,
   });
 }

3. 后端封装response

@Data
@AllArgsConstructor
@NoArgsConstructor
public class ApiResult implements Serializable {

    private Integer status;
    private String message;
    private Object data;

    public static ApiResult succ(Object obj){
        ApiResult ar=new ApiResult();
        ar.setStatus(200);
        ar.setMessage("操作成功");
        ar.setData(obj);
        return ar;
    }    
}

4. 异常封装

开源框架EL-ADMIN开发自己的 web应用(7)-异常控制,可以直接利用

5. controller层响应axios请求

@RestController
public class ArticleController {
	
	//文件上传地址 写在了application.yml中
    @Value("${file.upload.abpath}")
    private String abpath;

    //文件夹url地址  写在了application.yml中   
    @Value("${file.upload.mdImageDir}")
    private String mdImageDir;

    //端口号   写在了application.yml中
    @Value("${server.port}")
    private String port;


    @Autowired   //定义方法见https://editor.csdn.net/md/?articleId=108739365
    private ArticleService articleService;

    //上传md文件
    @RequestMapping("/api/saveMd")
    public String saveMd(@RequestBody JSONObject param){
        //取出content
        String str = param.getString("content");
        String name=param.getString("name");
        String typeId=param.getString("typeId");

        System.out.println("name= "+name+"  "+"typeId= "+typeId);
        String filepath=abpath+name+".md";
        //string2File方法定义见https://editor.csdn.net/md/?articleId=108765569
        FileUtil.string2File(str,filepath);
        return "ok";
    }


    //上传图片
    @PostMapping("/api/uploadFile")
    public Object uploadFile(@RequestParam("image") MultipartFile file, HttpServletRequest request){
        //上传到指定目录
        String imgAbPath=abpath+"assets/";
        //相当于“http://localhost:4000” +mdImageDir
        String imgUrlDir="http:"+request.getHeader("Origin").split(":")[1]+":"+port+mdImageDir;
        File f = FileUtil.upload(file, imgAbPath);

        //返回该目录地址
        String url=imgUrlDir+f.getName();
        //直接利用定义的ApiResult封装结果
        //如果有异常可以抛出自定义异常,异常定义见4.异常封装
        return ApiResult.succ(url);


    }

    //下载Md文件
    @GetMapping("/api/downloadFile/{id}")
    public void downloadFile(@PathVariable("id") long id, HttpServletRequest request, HttpServletResponse response) {

        //根据id下载md文件
        //获取文件绝对路径
        Article ar = articleService.queryById(id);
        String path = abpath+ar.getName();
        File f=new File(path);
        FileUtil.downloadFile(request,response,f,false);

    }

    @GetMapping("/api/queryAll")
    public ResponseEntity<Object> queryAll(){
        List<Article> articles = articleService.queryAll();
        //利用spring自带的ResponseEntity封装结果,推荐,但无法传入String类型,所以才定义了ApiResult,待搞懂
        return new ResponseEntity<>(articles, HttpStatus.OK);

    }

    @GetMapping("api/queryById/{id}")
    public ResponseEntity<Object> queryById(@PathVariable("id")  long id){

        Article article = articleService.queryById(id);
        if(article==null){
        	//抛出自定义异常,自定义异常见https://editor.csdn.net/md/?articleId=108536812
            throw new BadRequestException("此id不存在");
        }
        return new ResponseEntity<>(article, HttpStatus.OK);
    }


    @PostMapping("api/addArticle")
    public Boolean addAritcle(Article article){
        return articleService.addArticle(article);
    }

}

6. 请求的响应

	//Vue中引入相应方法
	import {getArticleById,getAll,postMd,uploadFile} from '@/api/article'	

	//查询所有文章
    getAll().then((res => {
        console.log(res)
      }))
	
	//根据id查询文章
    getArticleById(id).then(res=>{
        console.log(res)
     })

	 //传递name,typeId,content
     postMd(this.form.name,this.form.region,this.value);

    
      // 将图片上传到服务器.
      var formdata = new FormData();
      //$file 为传入的image图片对象 具体见https://editor.csdn.net/md/?articleId=108765569
      formdata.append('image', $file);
      uploadFile(formdata).then(resp=> { 
          var url = resp.data; //取出上传成功后的url
          if (resp.status == 200) {
          //  将这些图片放回md文件中
          //pos为markdown文件中图片对应的位置
          _this.$refs.md.$img2Url(pos, url)
          } else {
             _this.$message({type: resp.status, message: resp.statusText});
          }
      });

7. 总结

axios做好请求与回复拦截的封装、方法的封装,springboot后端做好回复结果的封装(包括异常回复的封装),即可以完美处理请求与回复,不管是请求成功或失败都可以相应处理。