2. it技术
  3. axios的基本使用

axios的基本使用

it2023-12-31  71

1.axios的基本使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="./js/axios.js"></script> <script> axios.get('http://localhost:3000/adata').then(function(ret) { console.log(ret); //注意data属性是固定的用法 console.log(ret.data); }) </script> </body> </html>

2.axios get请求传递参数

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="./js/axios.js"></script> <script> /* axios.get('http://localhost:3000/axios?id=123').then(function(ret) { console.log(ret); console.log(ret.data); }) */ /* axios.get('http://localhost:3000/axios/:123').then(function(ret) { console.log(ret); console.log(ret.data); }) */ /* axios.get('http://localhost:3000/axios', { params: { id: 789 } }).then(function(ret) { console.log(ret); console.log(ret.data); }) */ axios.delete('http://localhost:3000/axios', { params: { id: 111 } }).then(function(ret) { console.log(ret); console.log(ret.data); }) </script> </body> </html>

3.post请求传递参数

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="./js/axios.js"></script> <script> // /* axios({ method: 'post', url: 'http://localhost:3000/axios', data: { uname: 'lisi', pwd: 123 } }).then(function(ret) { console.log(ret.data); }) */ /* axios.post('http://localhost:3000/axios', { uname: 'lisi', pwd: 123 }) .then(res => { console.log(res) console.log(res.data); }) .catch(err => { console.error(err); }) */ /* var params = new URLSearchParams(); params.append('uname', 'zhangsan') params.append('pwd', '123') axios.post('http://localhost:3000/axios', params) .then(res => { console.log(res) console.log(res.data); }) .catch(err => { console.error(err); }) */ axios.put('http://localhost:3000/axios/123', { uname: 'lisi', pwd: 123 }) .then(res => { console.log(res) console.log(res.data); }) .catch(err => { console.error(err); }) </script> </body> </html>

4.axios的响应结果与全局配置

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="./js/axios.js"></script> <script> // /* axios.get('http://localhost:3000/axios-json') .then(res => { console.log(res) }) .catch(err => { console.error(err); }) */ //配置请求的基准地址 axios.defaults.baseURL = "http://localhost:3000/"; //配置请求头信息 axios.defaults.headers["mytoken"] = "hello"; axios.get('axios-json') .then(res => { console.log(res) }) .catch(err => { console.error(err); }) </script> </body> </html>

5.axios的拦截器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="./js/axios.js"></script> <script> //请求拦截器 axios.interceptors.request.use(config => { // Do something before request is sent console.log(config.url); config.headers.mytoken = "nihao" return config; }, error => { // Do something with request error return Promise.reject(error); }); //响应拦截器 axios.interceptors.response.use(response => { // Do something before response is sent console.log(response); var data = response.data return data; }, error => { // Do something with response error return Promise.reject(error); }); axios.get('http://localhost:3000/adata') .then(res => { console.log(res); }) .catch(err => { console.error(err); }); </script> </body> </html>

6.axios的全局配置

7.创建axios实例

8.axios封装

9axios拦截器

最新回复(0)