Vue学习笔记（7. axios异步请求）

1. axios请求方式

方式1：axios({method:"GET",url:"..."})

方式2：axios({method:"POST",url:"...",data:"..."})

方式3：axios.get("url...")

方式4：axios.post("url...","data...")

2. 安装axios

命令：npm install axios

3. 安装querystring

命令：npm install querystring，

注释：post请求提交数据用

4. 解决跨域访问

vue2.x和vue3.x的vue-cli项目解决案（在文件vue.config.js中追加下记代码）

 vue3.2的vite项目解决案（在文件vite.config.ts中追加下记代码）

5. 创建一个后端项目

用于测试处理的ajax请求

package releaseTest.controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import releaseTest.entity.User;


/**
 * Servlet implementation class AxiosTest
 */
@WebServlet("/AxiosTest")
public class AxiosTest extends HttpServlet {
	private static final long serialVersionUID = 1L;

    /**
     * Default constructor. 
     */
    public AxiosTest() {
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		String id = request.getParameter("id");
		PrintWriter writer = response.getWriter();
		writer.write("{name:'张三'");
		writer.write(",id:"+id);
		writer.write(",age:18}");
		writer.flush();
		writer.close();
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		String type = request.getParameter("type");
		String name = request.getParameter("name");
		String age = request.getParameter("age");

		System.out.println("type:"+type);
		System.out.println("name:"+name);
		System.out.println("age:"+age);
		
		PrintWriter writer = response.getWriter();
		writer.write("{status:'200'");
		if("1".equals(type)) {
			writer.write(",msg:'ajax普通方案'}");
		} else {
			writer.write(",msg:'ajax快捷方案'}");
		}
		writer.flush();
		writer.close();
	}

}

6. axios的4种请求方式