axios的基体请求使用

1. get 请求使用方法

　　　　var url = "请求链接";

　　　　var param= {"参数":"参数的值"};

 

　　　　// axios 参数必须用params包裹，例如: var param = {params:{pageNo:1,pageSize:20}}

　　　　

　　　　param = {params:param}; 

　　　　axios.get(

　　　　url,param

 

　　　　).then(function (data) {

　　　　callBackFunc(data.data);

　　　　}).catch(function (e) {

　　　　console.log("url:"+url +",请求失败，网络错误");

　　　　});

　　2.post请求使用方法

1. var url = "请求链接";
2. var formDate = {"参数":"参数的值"};
3. axios.post(
4. url,
5. formDate
6. ).then(function (data) {
7. alert("请求成功");
8. }).catch(function (e) {
9. console.log("url:"+url +",请求失败，网络错误");

 

 

　　　　});

 

　　　　使用方法就这么简单，

　　　　################## 解决跨域问题 ##############################################

　　　　先看看报错信息，跨域问题一直让人很头疼

　　　　

 

 　　　　　　解决方案是在后端服务器响应时添加响应头（这里用 java 示例）在过滤器中为每个请求添加响应头Access-Control-Allow-　　　Origin 以解决跨域问题

1. 1. 　　package com.icode.common.web.config.filter;
   2. 　　import com.icode.common.command.UserSessionCommand;
   3. 　　import com.icode.common.constant.CommonContant;
   4. 　　import com.icode.common.web.service.WebCacheService;
   5. 　　import com.xd.core.common.error.ErrorMsg;　　import com.xd.core.common.utils.JsonParser;
   6. 　　import com.xd.core.common.utils.StringUtils;
   7. 　　import com.xd.core.common.utils.WebUtils;
   8. 　　import org.springframework.context.ApplicationContext;
   9. 　　import org.springframework.web.context.support.WebApplicationContextUtils;
   10. 　　import javax.servlet.*;
   11. 　　import javax.servlet.http.HttpServletRequest;
   12. 　　import javax.servlet.http.HttpServletResponse;
   13. 　　import java.io.IOException;
   14. 　　/**
   15. 　　* <过滤器>
   16. 　　**/
   17. 　　@javax.servlet.annotation.WebFilter(urlPatterns = "/*", filterName = "myfilter")
   18. 　　public class WebFilter implements Filter {
   19. 　　@Override
   20. 　　public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
   21. 　　HttpServletRequest request = (HttpServletRequest) servletRequest;
   22. 　　HttpServletResponse response = (HttpServletResponse) servletResponse;
   23. 　　//为所有请求添加响应头，以解决ajax跨域问题
   24. 　　response.setHeader("Access-Control-Allow-Origin", "*");
   25. 　　//设置编码16:12:3416:12:35
   26. 　　response.setCharacterEncoding("UTF-8");
   27. 　　request.setCharacterEncoding("UTF-8");
   28. filterChain.doFilter(request, response);
   29. 　　}

 

 

　　　　}

　　　　关键代码

1.  
   //为所有请求添加响应头，以解决ajax跨域问题
2.  
   response.setHeader("Access-Control-Allow-Origin", "*");

然后前端 axios 的 post 请求封装成 FormData 对象 即可解决跨域问题

1.  
   //使用formdata方式传参
2.  
   var formDate = new FormData();
3.  
   formDate.append("loginName","123");
4.  
   formDate.append("password","123");
5.  
   axios.post(
6.  
   url,
7.  
   formDate,
8.  
   config
9.  
   ).then(function (data) {
10.  
    callBackFunc(data.data);
11.  
    }).catch(function (e) {
12.  
    console.log("url:"+url +",请求失败，网络错误");
13.  
    });

    axios的请求拦截器和响应拦截器的使用：

    xios的拦截器是一个非常优秀的设计，借助它我们可以实现很多效果，节省重复的代码。

     

axios是一个设计很巧妙的库，而且他的代码很短，是学习优秀开源库很好的例子，推荐有时间都能去看看它的源码。

axios结合django的使用：

开发环境：vue+django+axios
问题：
在网上看了好多个方法，有修改vue前端的，有修改服务端的，在前端vue的config文件夹下的index.js中配制proxyTable的方法试过之后没有解决。最后还是修改的服务端的代码。
方法：使用django-cors-headers
（1）打开项目目录，使用pip安装

pip install django-cors-headers

修改项目的settings.py文件，添加到app中

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...

还是在settings.py中，添加中间件
注意添加的顺序，要在SessionMiddleware和CommonMiddleware之间
MIDDLEWARE = [ # Or MIDDLEWARE_CLASSES on Django < 1.10 ... 'django.contrib.sessions.middleware.SessionMiddleware', 
'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ... ]

　　　　

在settings.py下面添加

 

 

CORS_ALLOW_CREDENTIALS = True CORS_ORIGIN_ALLOW_ALL = True CORS_ALLOW_METHODS = ( 'DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT', 'VIEW', ) CORS_ALLOW_HEADERS = ( 'XMLHttpRequest', 'X_FILENAME', 'accept-encoding', 'authorization', 'content-type', 'dnt', 'origin', 'user-agent', 'x-csrftoken', 'x-requested-with', 'Pragma', )
如果报错404就是路由问题