axios
axios.get("http://127.0.0.1:5000/api/projects")
- Promise {<pending>} 返回异对象，和协程函数执行后返回对象差不多，异步执行
- 我只管发请求，后端给响应了，我再去执行，Promise 表示未来执行的一个对象，这个对象什么时候执行呢？后端给我响应了我才立即去执行。执行什么呢？执行这样的回调
- 发了请求不会等，什么时候响应结果回来，才会执行回调函数
- axios请求都是异步的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <script> // const res1 = axios.get("http://127.0.0.1:5000/api/projects/name") // console.log("res1", res1) // // 当请求成功时（响应状态码为2系列），会执行then方法传入的回调函数 // res1.then(function(response) { // console.log(response) // }) // //当请求失败，会执行catch方法传入的回调函数 // res1.catch(function(error) { // console.log(error) // console.log(error.response) // }) // //js支持链式调用 // axios.get("http://127.0.0.1:5000/api/projects").then(function(response) { // console.log(response) // }).catch(function(error) { // console.log(error) // console.log(error.response) // }) // const res2 = axios.get("http://127.0.0.1:5000/api/projects") // console.log("res2", // res2) // res2.then(function(response) { // console.log(response) // }) // const res3 = axios.get("http://127.0.0.1:5000/api/projects") // console.log(res3) // res3.then(function(response) { // console.log("res3", response) // }) // console.log("python") // axios.get("http://127.0.0.1:5000/api/interface", { // //传递查询字符串参数 // params: { // id: '1001' // } // }).then(function(response) { // console.log(response) // //获取响应状态码 // console.log(response.status) // //获取响应数据 // console.log(response.data) // }).catch(function(error) { // console.log(error) // console.log(error.response) // }) //post请求 json格式传参 // axios.post("http://127.0.0.1:5000/api/user/login", { // user: "python01", // pwd: "lemonban" // }).then(function(response) { // //获取响应数据 // console.log(response.data) // }).catch(function(error) { // console.log(error) // console.log(error.response) // }) //post请求 表单格式传参,配置 // var params = new URLSearchParams(); // params.append("user", "python01") // params.append("pwd", "lemonban") // let burl = "http://127.0.0.1:5000/" // axios.post("api/user/login ", params, { // headers: { // musen: "123456" // }, // baseURL: burl // }).then(function(response) { // //获取响应数据 // console.log(response.data) // console.log(response) // }).catch(function(error) { // console.log(error) // console.log(error.response) // }) // //全局请求配置 // axios.defaults.baseURL = 'http://127.0.0.1:5000'; // axios.defaults.headers.common['musen'] = "1234"; // var params = new URLSearchParams(); // params.append("user", "python01") // params.append("pwd", "lemonban") // axios.post("/api/user/login ", params).then(function(response) { // //获取响应数据 // console.log(response.data) // console.log(response) // }).catch(function(error) { // console.log(error) // console.log(error.response) // }) //针对多个后端服务的场景，针对于微服务，多个URL处理 // const .podt = axios.create({ // baseURL: 'http://127.0.0.1:5000' // }); // // Alter defaults after instance has been created // requestA.defaults.headers.common['musen'] = "123"; // var params = new URLSearchParams(); // params.append("user", "python01") // params.append("pwd", "lemonban") // requestA.post("/api/user/login ", params).then(function(response) { // //获取响应数据 // console.log(response.data) // console.log(response) // }).catch(function(error) { // console.log(error) // console.log(error.response) // }) // const requestB = axios.create({ // baseURL: 'http://baidu.com' // }); // // Alter defaults after instance has been created // requestA.defaults.headers.common['musen'] = "123"; // var params = new URLSearchParams(); // params.append("user", "python01") // params.append("pwd", "lemonban") // requestB.post("/api/user/login ", params).then(function(response) { // //获取响应数据 // console.log(response.data) // console.log(response) // }).catch(function(error) { // console.log(error) // console.log(error.response) // }) // //需要鉴权接口处理 // const requestA = axios.create({ // baseURL: 'http://47.112.233.130:8888/' // }); // // /users/login/ // requestA.post("/users/login/", { // username: "musen002", // password: "123456", // }).then(function(response) { // //获取响应数据 // console.log(response.data) // console.log(response) // let token = response.data.token // //保存token到locaStroge，前端存储数据的方式 // window.localStorage.setItem("token", token) // window.sessionStorage.setItem("token", token) // }).catch(function(error) { // console.log(error) // console.log(error.response) // }) // let token = 'Bearer ' + window.localStorage.getItem("token") // // 前端怎么保存token，保存在 本地存储空间(关闭不会清空)，会话存储空间(关闭窗口会清空),都是保存到浏览器 // // /projects/ // requestA.get("/projects/", { // headers: { // Authorization: token // } // }).then(function(response) { // //获取响应数据 // console.log(response.data) // console.log(response) // }).catch(function(error) { // console.log(error) // console.log(error.response) // }) //请求拦截器，所有的请求发送前，定义拦截器，理解为钩子函数，请求前先调用拦截器 // const requestA = axios.create({ // baseURL: 'http://47.112.233.130:8888/', // // 自定义当成成功处理的http状态码范围 // validateStatus: function(status) { // return status >= 200 && status < 300; // default // } // }); // // 添加请求拦截器 // requestA.interceptors.request.use(function(config) { // // 在发送请求之前做些什么 // //处理token // //判断路径是不是登录接口，如果是不加token，如果不是加token // console.log(config) // //判断请求是不是登录接口 // if (config.url == '/users/login/') { // return config // } else { // //需要鉴权 // if (window.localStorage.getItem("token")) { // config.headers["Authorization"] = 'Bearer ' + window.localStorage.getItem("token"); // return config; // } else { // alert("没有权限访问"); // return config; // } // } // }, function(error) { // // 对请求错误做些什么 // return Promise.reject(error); // }); // //简短版 // // 添加请求拦截器 // requestA.interceptors.request.use(function(config) { // // 在发送请求之前做些什么 // //处理token // //判断路径是不是登录接口，如果是不加token，如果不是加token // console.log(config) // //判断请求是不是登录接口 // if (config.url == '/users/login/') return config // //需要鉴权 // if (!window.localStorage.getItem("token")) return config; // config.headers["Authorization"] = 'Bearer ' + window.localStorage.getItem("token"); // return config; // }, // function(error) { // // 对请求错误做些什么 // return Promise.reject(error); // }); // //响应拦截器：执行回调函数前，执行的函数 // // 在响应拦截器中可以对响应的http状态做相关判断，然后进行相关的处理 // requestA.interceptors.response.use(function(response) { // // 对响应数据做点什么 // // 后端先到拦截器，再到then // // 通常没有权限，页面会做一个警告提示，后端服务异常 // console.log("响应拦截器1", response) // return response; // }, function(error) { // // 对响应错误做点什么 // console.log("响应拦截器2", error) // console.log("响应拦截器2", error.response.data.detail) // if (error.response.status == 401) { // alert(error.response.data.detail); // } // return Promise.reject(error); // }); // // /users/login/ // requestA.post("/users/login/", { // username: "musen0023", // password: "123456", // }).then(function(response) { // //获取响应数据 // console.log(response.data) // console.log(response) // let token = response.data.token // //保存token到locaStroge，前端存储数据的方式 // window.localStorage.setItem("token", token) // window.sessionStorage.setItem("token", token) // }).catch(function(error) { // console.log(error) // console.log(error.response) // }) // // /projects/ // requestA.get("/projects/").then(function(response) { // //获取响应数据 // console.log(response.data) // console.log(response) // }).catch(function(error) { // console.log(error) // console.log(error.response) // }) const requestA = axios.create({ baseURL: 'http://47.112.233.130:8888/', // 自定义当成成功处理的http状态码范围 validateStatus: function(status) { return status >= 200 && status < 300; // default } }); //对于异步请求都可以做async await处理 // async 定义异步函数 async function login() { // await等待异步代码执行完成，直接response返回， console.log("111") // 同一函数体里面 await ，必须等await里面代码执行完才会继续往下面走 let response = await requestA.post("/users/login/", { username: "musen002", password: "123456", }) console.log("222") console.log("login", response) //等接口响应回来才会继续往下面执行，比如下面调用获取项目用例接口，只有登录接口执行完毕，才会继续往下面执行 //定义了 async 就是异步函数，之前只是发请求是异步的，现在是整个函数是异步的 } login() console.log("333") //打印结果是 111,222，login因为login是个异步函数 </script> <body> </body> </html>
