axios与fetch
axios
axios是什么
axios是一个基于PRominse的HTTP库,可以用在浏览器和node.js中
第三方Ajax库
http://www.axios-js.com/zh-cn/docs/
axios的基本用法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>axios</title> </head> <body> <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> --> <script src="https://unpkg.com/axios@1.3.4/dist/axios.min.js"></script> <script> //1.axios是什么 //axios是一个基于PRominse的HTTP库,可以用在浏览器和node.js中 //第三方Ajax库 //http://www.axios-js.com/zh-cn/docs/ //2.axios的基本用法 //引入axios //console.log(axios); const url = 'https://www.imooc.com/api/http/search/suggest?words=js' // axios(url,{ // method:'post', // //请求时的头信息 // headers:{ // 'Content-Type':'application/x-www-form-urlencoded' // /* 'Content-Type':application/JSON */ // }, // //通过请求头携带的数据 // params:{ // username:'lyw' // }, // //通过请求体携带的数据 // // data:{ // // age:18, // // sex:'male' // // } // data:'age=18&sex=male', // //timeout:10 // //withCredentials:true // }).then(Response =>{ // console.log(Response); // console.log(Response.data.data); // }).catch(err => { // console.log(err); // }); // axios.get(url,{ // params:{ // username='lyw' // } // }) // .then(Response => { // console.log(Response); // }); axios.post('https://www.imooc.com/api/http/search/suggest?words=js',{ username:'alex' }).then(Response => { console.log(Response); }).catch(err =>{ console.log(err); }); // axios.put() // axios.delete() </script> </body> </html>
fetch
1.Fetch是什么
Fetch也是前后端通信的一种方式
Fetch是ajax(xmlhttprequest)的一种替代方案,它是基于promise的
Ajax的兼容性比Fetch好,同时Fetch原生没有提供abort和timeout
2.Fetch的基本用法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Fetch</title> </head> <body> <script> // Fetch // 1.Fetch是什么 // Fetch也是前后端通信的一种方式 // Fetch是ajax(xmlhttprequest)的一种替代方案,它是基于promise的 // Ajax的兼容性比Fetch好,同时Fetch原生没有提供abort和timeout // 2.Fetch的基本用法 // fetch调用后返回的是promise对象,因为它是基于promise const url = 'https://www.imooc.com/api/http/search/suggest?words=js'; // body: (...) body数据流 只能读取一次 // bodyUsed: false 是否读取的标志,读取后为false // ok: true // status: 200 状态码 // statusText: "OK" 状态文本 // type: "cors" // url: "https://www.im // 第二个参数用来设置fetch // 还可以传formdata数据 body:fd const fd=new FormData(); fetch(url, { method: 'post', body: 'username=alex&age=18', // 如果想传json格式要设置stringify // body:JSON.stringify({username:'alex'}), headers: { 'Content-Type': 'application/x-www-form-urlencoded' // 'Content-Type': 'application/json' }, // 如果要跨域资源共享要设置cors,但是默认都是cors mode:'cors', // 跨域是否携带cookie 不是布尔值要携带需要设置成字符串的include credentials:'include' }) .then(response => { console.log(response); // body/bodyUsed body请求体 // body 只能读一次,读过之后就不让再读了,bodyUsed变成true // ok // 如果为 true,表示可以读取数据,不用再去判断 HTTP 状态码了 if (response.ok) { // response.json是读取body的数据,那么返回后是一个promise对象,需要在then中输出 return response.json(); //返回的是json数据 // return response.text(); 返回的是文本类型 } else { throw new Error(`HTTP CODE异常${response.status}`); } }).then((data => { console.log(data); })) .catch(err => { console.log(err); }) </script> </body> </html>