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

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后端做好回复结果的封装（包括异常回复的封装），即可以完美处理请求与回复，不管是请求成功或失败都可以相应处理。